2017-02-12

Vue.js旅程(四)

动画

在平常我们做项目的过程中，网页动画效果是我们经常要碰到的需求,在Vue中我们该如何完成到动画需求呢？

实现动画的三种方式

通过css控制动画效果

这种是最简单的控制动画效果的方法，因为没有调用到复杂的方法，所以使用起来还是很容易的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .show-transition{
            transition:all .5s ease;
            padding-left: 0px;
        }
        .show-enter, .show-leave{
            padding-left: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
    <button @click='toggle'>展示/隐藏</button>
    <div v-show='isShow' transition='show'>
        hello Vue.js
    </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                isShow:false;
            }
            methods:{
                toggle:function(){
                    this.isShow = !isShow;
                }
            },
            transitions:{
                'show':{
                    enterClass:'fadeInRight',
                    leaveClass:'fadeOutRight'
                }
            }
        })
    </script>
</body>
</html>

配合animate.css来实现动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="animate.css">
</head>
<body>
    <div id="app">
        <button @click='toggle'>显示/隐藏</button>
        <div v-show='isShow' class='animated' transition='show'>
            hello Vue.js
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                isShow:fasle
            },
            methods:{
                toggle:function(){
                    this.isShow = !this.isShow;
                }
            }
            })
    </script>
</body>
</html>

过度的钩子函数实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click='toggle'>显示/隐藏</button>
        <div v-show = 'isShow' transition='show'>
            Hello Vue.js
        </div>
    </div>
    <script>
    Vue.transition('show',{
        beforeEnter:function(el){
            //控制动画的进入准备
            //给应用了这个动画的元素添加transform属性
            el.style.transform = 'translate(100px,0)';
        },
        enter:function(el){
            //保证动画的实时刷新
            var oh = el.offsetHeigh;
            this.$nextTick(function(){
                el.style.transform = 'translate(0,0)';
                })
        },
        afterEnter:function(){
            //动画完成后的逻辑
        }
    })
    new Vue({
        el:'#app',
        data:{
            isShow:false
        },
        methods:{
            toggle:function(){
                this.isShow = !this.isShow;
            }
        }
    })
    </script>
</body>
</html>