vue学习07--进入/离开&列表过渡

1、CSS过渡

---

过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

实例1：

    <style>        .fade-enter-active, .fade-leave-active {            transition: opacity .5s        }        .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {            opacity: 0        }        .fade-enter-to{            color: red;        }       </style>

    <div id="demo">        <button @click="change">改变</button>        <transition name="fade">            <p v-if="seen">show</p>        </transition>    </div>    <script type="text/javascript">        var demo = new Vue({            el:"#demo",            data:{                seen:true            },            methods:{                change:function(){                    this.seen = !this.seen;                }            }        })    </script>

实例2：

<style>    /* 可以设置不同的进入和离开动画 */    /* 设置持续时间和动画函数 */    .slide-fade-enter-active {      transition: all .3s ease;    }    .slide-fade-leave-active {      transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);    }    .slide-fade-enter, .slide-fade-leave-to    /* .slide-fade-leave-active for below version 2.1.8 */ {         transform: translateX(10px);         opacity: 0;    }</style>

    <div id="demo1">        <button @click="seen1=!seen1">transition</button>        <transition name="slide-fade">            <p v-if="seen1">hello</p>        </transition>    </div>    <script type="text/javascript">        var demo1 = new Vue({            el:"#demo1",            data:{                seen1:true            }        })    </script>

2、CSS动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。