我一直在进一步研究使用 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 中移除时动画会淡出。
最佳答案
动画工作原理的文档仍在制作中。
目前有两种制作动画的方法。
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 相同,并且会使用react。您需要执行以下操作:
- 在您的页面中包含
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
关于javascript - Maquette.js 中的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29386710/