Анимации в Maquette.js

Question

Я изучал использование maquette.js в качестве виртуальной библиотеки DOM.
Глядя на веб-сайт, библиотека имеет функциональность для поддержки анимации при добавлении, удалении и обновлении DOM-узлов.
Но я не могу найти какие-либо документы или API о том, что нужно сделать для достижения этой цели.

Чтобы сделать его более конкретным, я сделал небольшой образец ниже и здесь.

var isPopupShown = false;

var togglePopup = function(){
 isPopupShown = !isPopupShown;   
}

var renderMaquette = function () {
  return h("div#container", [
    h("button",  {
      onclick: togglePopup
    }, ["Click me"]),
    isPopupShown ? h("div#popup") : null
  ]);
}

В примере, нажав кнопку, откроется всплывающее окно.
Я хотел бы, чтобы всплывающее окно анимировало постепенное появление, когда узел добавляется в DOM, и постепенное исчезновение, когда узел удаляется из DOM.

Answer 1

Документация о том, как работают анимации, все еще находится в процессе разработки.

В настоящее время есть два способа сделать анимацию.

Velocity.js

Самый простой способ - использовать такую ​​библиотеку, как speed.js. Чтобы это работало, вам необходимо:

1. Добавьте скрипт speed.js на страницу
2. + Изменить h("div#popup") в h("div#popup", {enterAnimation: fadeIn})
3. Добавьте следующую функцию javascript

Код:

var fadeIn = function(element) {
  element.style.opacity = 0;
  Velocity.animate(element, {opacity: 1}, 1500, "ease-out");
};

Вы можете посмотреть результат здесь.

CSS переходы

Вы также можете использовать CSS-переходы. Они работают так же, как angularJS, и реагируют. Вам нужно сделать следующее:

1. Включить css-transitions.min.js скрипт на вашей странице. Этот скрипт также предоставляется макетом.
2. + Изменить h("div#popup") в h("div#popup", {enterAnimation: "fadeIn"})
3. Измените вызов createProjector на maquette.createProjector(document.body, renderMaquette, {transitions: cssTransitions});
4. Добавьте следующие объявления стилей в таблицу стилей:

Стили:

.fadeIn {
  -webkit-transition: 0.5s ease-out opacity;
  transition: 0.5s ease-out opacity;
  opacity: 0;
}
.fadeIn.fadeIn-active {
  opacity: 1;
}

Вы можете посмотреть результат здесь