050——VUE中使用js库控制vue过渡动作 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用js库控制vue过渡动作</title>
    <script src="vue.js"></script>
    <script src="velocity.js"></script>
</head>
<body>
<!--
velocity官网：http://velocityjs.org/
Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，
并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。
Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、
转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。

它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation，
是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，
最低可兼容到 IE8 和 Android 2.3。
-->
<div id="demo">
    <button @click="type=!type">显示/隐藏</button>
    <transition @before-enter="beforEnter" @enter="enter" @leave="leave" :css="false">
        <h1 v-if="type">百度一下就知道</h1>
    </transition>
</div>
<script>
    new Vue({
        el:"#demo",
        data:{
            type:false
        },
        methods:{
            beforEnter(el){
              el.style.opacity=0;
            },
            enter(el,done){
                Velocity(el,{opacity:1},{duration:2000,complete:done});
            },
            leave(el,done){
                Velocity(el,{opacity:0},{duration:2000,complete:done});
            }
        }
    });
</script>

</body>

</html>

　　

posted @ 2018-01-11 16:42  生如逆旅，一苇以航  阅读(285)  评论(0)    收藏  举报