Тест свойств

Здесь будет показан тест основных свойств и варианты их использования:

  • duration — продолжительность анимации
  • easing — временная функция всей анимации
  • complete — обработчик завершения анимации

Анимация теперь будет создаваться с помощью конструктора. То же самое можно сделать и с помощью вызова melAnim.

Содержание

Тест

Исходный код для этого примера

HMTL

<div class="testcase">
    <!-- простой кубик для теста -->
</div>

JavaScript

var animation = new melAnim.Animation(myElement);

animation.propAt("width", "60%");
animation.duration("3s");
animation.easing("ease-out");

animation.onComplete(function () {
    myElement.style.backgroundColor = "green";
});

animation.start();

CSS

.testcase {
    width: 5%;
}
Fork me on GitHub