Jump to main content Jump to doc navigation

Анимации

Еще раз, мы включаем необходимые JS и CSS:

<link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>

А затем мы добавим некоторые элементы управления, которые будут выполнять простую анимацию, изменяющую размер элемента div:

    <script type="text/javascript">
        Ext.onReady(function() {
            var myDiv1 = Ext.get('div1');
            myDiv1.setSize(350,350, {duration: 1, easing:'bounceOut'});
        });
    </script>

Чтобы подготовить div и сделать нашу анимацию более удобной для просмотра, нам нужно добавить некоторые стили:

    <style type="text/css">
        .myDiv {
            border: 1px solid #AAAAAA;
            background: yellow;
            width: 200px;
            height: 35px;
        }
    </style>

Наконец, создайте div в теле вашего HTML:

<div id="div1" class="myDiv"></div>

Когда вы закончите, эта страница должна выглядеть примерно так:

<html>
    <title>Моя тестовая страница Ext JS: Анимация</title>
    <link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
    <script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
    <script type="text/javascript">

        Ext.onReady(function() {
            var myDiv1 = Ext.get('div1');
            myDiv1.setHeight(200);
            myDiv1.setSize(350,350, {duration: 1, easing:'bounceOut'});
        });
    </script>

    <style type="text/css">
        .myDiv {
            border: 1px solid #AAAAAA;
            background: yellow;
            width: 200px;
            height: 35px;
        }
    </style>
    <body>
        <h1>Анимации</h1>

        <div id="div1" class="myDiv"></div>

    </body>
</html>

Когда вы посмотрите это в браузере, вы должны увидеть, как ваш div увеличился в размере, чтобы стать квадратом.

Другие команды

Вы также можете использовать методы setHeight или setWidth, например:

myDiv1.setHeight(200);

Плавность

Одним из ключей к этому трюку является свойство «плавности». Доступные параметры плавности зависят от того, какая библиотека загружена, но вот краткий список доступных вариантов плавности

Тип плавности Описание
easeNone Равномерная скорость между точками.
easeIn Начинается медленно и ускоряется к концу. (квадратичная)
easeOut Начинается быстро и замедляется к концу. (квадратичная)
easeBoth Начинается медленно и замедляется к концу. (квадратичная)
easeInStrong Начинается медленно и ускоряется к концу. (квартик)
easeOutStrong Начинается быстро и замедляется к концу. (квартик)
easeBothStrong Начинается медленно и замедляется к концу. (квартик)
elasticIn Snap in elastic effect.
elasticOut Snap out elastic effect.
elasticBoth Snap both elastic effect.
backIn Немного откатывается назад, затем меняет направление и движется к концу.
обратно Overshoots end, then reverses and comes back to end.
backBoth Немного откатывается назад, затем меняет направление, заканчивается выбросом, затем разворачивается и возвращается к концу.
bounceIn Отскакивает от начала.
bounceOut Отскакивает от конца.
bounceBoth Отскакивает от начала и до конца.
  1. Ext JS - Окна сообщений
  2. Ext JS - Ajax
  3. Ext JS - Анимация
  4. Ext JS - Управление узлами
  5. Ext JS - Панели
  6. Ext JS - Расширенная сетка
  7. Ext JS - Внутри CMP

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

  • modmore
  • modmore
  • Jens Wittmann – Gestaltung & Entwicklung
  • Raffy
  • eydolan
  • Digital Penguin
  • Fabian Christen
  • Dannevang Digital
  • deJaya
  • Sepia River Studios
  • Following Sea
  • Anton Tarasov
  • Lefthandmedia
  • Nick Clark
  • Chris Fickling
  • Murray Wood
  • YJ
  • CrewMark
  • Richard

Budget

$305 per month—let's make that $500!

Learn more