V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
changlers
V2EX  ›  JavaScript

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

  •  1
     
  •   changlers · 2017-06-09 16:33:39 +08:00 · 2467 次点击
    这是一个创建于 2484 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    主要(几乎全部)借鉴了 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 })
    }
    
    Kilerd
        1
    Kilerd  
       2017-06-09 18:05:03 +08:00
    we need a online demo.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1029 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 22:22 · PVG 06:22 · LAX 15:22 · JFK 18:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.