javascript - 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 的库.为此，您需要:

1. 将 velocity.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");
};

可以查看结果here .

CSS 过渡

您还可以使用 CSS 过渡。它们的工作方式与 angularJS 相同，并且会使用react。您需要执行以下操作:

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;
}

可以查看结果here