Maquette.js 中的动画

Question

我一直在进一步研究使用 maquette.js 作为虚拟 DOM 图书馆。
查看 website 该库具有在添加、删除和更新 DOM 节点时支持动画的功能。
但是我找不到任何文档或 API 来说明如何做到这一点。

为了更具体，我在下面做了一个小示例 here。

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

最简单的方法是使用像 velocity.js 这样的库。为此，您需要：

将velocity.js脚本添加到页面
将h("div#popup")更改为h("div#popup", {enterAnimation: fadeIn})
添加以下javascript函数

代码：

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

您可以查看结果here。

CSS 转换

您还可以使用 CSS 转换。它们的工作方式与 angularJS 相同并会做出反应。您需要执行以下操作：

在您的页面中包含 css-transitions.min.js 脚本。这个脚本也由模型提供。
将h("div#popup")更改为h("div#popup", {enterAnimation: "fadeIn"})
将 createProjector 调用更改为 maquette.createProjector(document.body, renderMaquette, {transitions: cssTransitions});
将以下样式声明添加到样式表中：

样式表：

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

您可以查看结果here

Maquette.js 中的动画

Animations in Maquette.js

javascript

animation

maquette