003 Vue动画

一：

0.说明

　　在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

1.不使用动画

<!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>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
        <h3 v-if="flag">这是一个H3</h3>
    </div>

    <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    </script>
</body>

</html>

2.使用过度类名实现动画

<!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>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
        /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
        .v-enter{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-leave-to {
            opacity: 0;
            transform: translateX(450px);
        }

        /* v-enter-active 【入场动画的时间段】 */
        /* v-leave-active 【离场动画的时间段】 */
        .v-enter-active,
        .v-leave-active {
            transition: all 0.8s ease;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
        <!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
        <!-- transition 元素，是 Vue 官方提供的 -->
        <transition>
            <h3 v-if="flag">这是一个H3</h3>
        </transition>
    </div>

    <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    </script>
</body>

</html>

3.自定义V-前缀

<!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>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        .my-enter,
        .my-leave-to {
            opacity: 0;
            transform: translateY(70px);
        }

        .my-enter-active,
        .my-leave-active {
            transition: all 0.8s ease;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="toggle2" @click="flag2=!flag2">
        <transition name="my">
            <h6 v-if="flag2">这是一个H6</h6>
        </transition>
    </div>

    <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                flag2: false
            },
            methods: {}
        });
    </script>
</body>

</html>

4.使用animate.css

　　入场与出场

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./lib/vue-2.4.0.js"></script>
10     <link rel="stylesheet" href="./lib/animate.css">
11 </head>
12 
13 <body>
14     <div id="app">
15         <input type="button" value="toggle" @click="flag=!flag">
16         <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
17         <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
18           <h3 v-if="flag">这是一个H3</h3>
19         </transition> -->
20 
21         <!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 -->
22         <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
23           <h3 v-if="flag" class="animated">这是一个H3</h3>
24         </transition> -->
25 
26         <!-- 使用  :duration="{ enter: 200, leave: 400 }"  来分别设置 入场的时长 和 离场的时长  -->
27         <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 10000, leave: 10000 }">
28             <h3 v-if="flag" class="animated">这是一个H3</h3>
29         </transition>
30     </div>
31 
32     <script>
33         // 创建 Vue 实例，得到 ViewModel
34         var vm = new Vue({
35             el: '#app',
36             data: {
37                 flag: false
38             },
39             methods: {}
40         });
41     </script>
42 </body>
43 
44 </html>

5.JS钩子实现半场动画

　　注意调用done。

<!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>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="快到碗里来" @click="flag=!flag">
        <!-- 1. 使用 transition 元素把 小球包裹起来 -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>

    <script>

        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
                // 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
                beforeEnter(el) {
                    // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
                    // 设置小球开始动画之前的，起始位置
                    el.style.transform = "translate(0, 0)"
                },
                enter(el, done) {
                    // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
                    // 可以认为 el.offsetWidth 会强制动画刷新
                    el.offsetWidth
                    // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
                    el.style.transform = "translate(150px, 450px)"
                    el.style.transition = 'all 1s ease'

                    // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
                    done()
                },
                afterEnter(el) {
                    // 动画完成之后，会调用 afterEnter
                    // console.log('ok')
                    this.flag = !this.flag
                }
            }
        });
    </script>
</body>

</html>

6.列表动画

appear ：实现入场的效果。

tag="ul"：transtion-group将要渲染成啥元素，如果不指定，则渲染为span

<!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>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
            width: 100%;
        }

        li:hover {
            background-color: hotpink;
            transition: all 0.8s ease;
        }



        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }

        /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
        .v-move {
            transition: all 0.6s ease;
        }

        .v-leave-active {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="app">

        <div>
            <label>
                Id:
                <input type="text" v-model="id">
            </label>

            <label>
                Name:
                <input type="text" v-model="name">
            </label>

            <input type="button" value="添加" @click="add">
        </div>

        <!-- <ul> -->
        <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
        <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
        <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
        <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
        <transition-group appear tag="ul">
            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
                {{item.id}} --- {{item.name}}
            </li>
        </transition-group>
        <!-- </ul> -->

    </div>

    <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    { id: 1, name: '赵高' },
                    { id: 2, name: '秦桧' },
                    { id: 3, name: '严嵩' },
                    { id: 4, name: '魏忠贤' }
                ]
            },
            methods: {
                add() {
                    this.list.push({ id: this.id, name: this.name })
                    this.id = this.name = ''
                },
                del(i) {
                    this.list.splice(i, 1)
                }
            }
        });
    </script>
</body>

</html>

　　效果：