03_10.使用动画钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- vue对于transtion包裹起来的标签, 提供了对应的动画事件, 供我们使用js的方式编写动画 -->
        <transition v-on:before-leave="bLeave" v-on:leave="leave" v-on:after-leave="aLeave">
            <p v-if="isShow">白毛浮绿水</p>
        </transition>
        <button @click="change">显示隐藏</button>
    </div>

    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isShow: true,
                left: 0
            },
            methods: {
                change: function() {
                    this.isShow = !this.isShow;
                },
                // 动画前做的事情在这里写, 可以在这里定义元素的初始样式
                bLeave(el) {
                    console.log(el);
                    el.style.marginLeft = 0;
                },
                // 动画过程在这里编写, 该函数除了可以接收到元素外, 还有一个done方法, 用于告诉vue什么时候动画结束的
                // 注意事项: 必须在动画结束时, 手动调用done方法, 不然元素就不会消失
                // 注意事项2: 有些时候我们修改元素的style视图不会马上更新, 解决方案是把一些需要计算的数据定义在data里, 
                // 修改data里的数据, 会让vue强制更新视图
                leave(el, done) {
                    console.log(el);
                    var timer = setInterval(() => {
                        this.left += 10;
                        el.style.marginLeft = `${this.left}px`;

                        if(this.left >= 200) {
                            clearInterval(timer);
                            done();
                        }
                    }, 300);
                },
                // 动画结束时, 如果元素样式需要重置, 那么可以再这里重置
                aLeave(el) {
                    console.log(el);
                    // 如果要实现多次效果，可以在结束之后将上面的left清0
                    this.left = 0;
                }             
            }
        });
    </script>
</body>
</html>
03_10.使用动画钩子函数

推荐阅读更多精彩内容
