给大家推荐一个很有用的 transition 过渡动画插件

2017-06-09 16:33:39 +08:00
 changlers

当当当当,是我自己上班之余因业务需要,周末的时候赶了一天一夜写出来

主要(几乎全部)借鉴了 vue 的用法和 react 的一些东西,代码主要使用 es5 编写,除了 Promise 暂时没想到替代的方法之外,可轻松的移植到项目当中

1.类似 vue 的 watch 观察变量产生回调

2.类似 vue 的 data 用法

3.类似 react 的更新 state 方法

先放出 github 地址 gtihub

这款插件的用法

Continue-for-one-second

天若有情天亦老,我为 element 续一秒

用法

在你需要使用过度动画的节点外层使用

<transition show="showName">
    <any></any>
</transition>

在 js 中

var transition = new Transition();
var fade = {
    opacity: 0,
}
var show = {
    opacity: 1,
}
var appear = {
    transition: 'opacity 1s ease-in-out'
}
// 在此绑定你想要实现某动画的 element 的 class
transition.cssAnimation({ fade: fade, appear: appear, show: show }, 'someName');
var test = function () {
    var someName = transition.state.someName;
    transition.setState({ someName: !someName })
}
2662 次点击
所在节点    JavaScript
1 条回复
Kilerd
2017-06-09 18:05:03 +08:00
we need a online demo.

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/367267

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX