1

我一直在进一步研究使用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 中删除时会动画淡出。

4

1 回答 1

2

动画如何工作的文档仍在进行中。

目前有两种方法可以制作动画。

速度.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");
};

您可以在此处查看结果。

CSS 过渡

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

  1. 在您的页面中包含css-transitions.min.js脚本。该脚本也由 maquette 提供。
  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;
}

你可以在这里查看结果

于 2015-04-01T10:23:47.537 回答