Vue相关(过渡动画)

Vue 过渡 && 动画

一、CSS过渡

1.transition标签可以用来封装需要过渡的元素，添加entering/leaving 过渡，

条件是：（1）使用条件渲染语句 v-if/v-show（2）动态组件（3）组件根节点

　　通过style标签设置过渡动画时需要为transition指定name属性，当指定了name属性之后，
vue会自动去找几个过渡动画需要的类

active类中一般放过渡属性，例如transition,animation等，放animation需要指定动画关键帧（v-是这些类名的前缀，会被替换为transition中name属性） v-enter-active（进入中，过渡状态） v-enter（进入之前，开始过渡状态） v-enter-to(进入结束，开始过渡的结束状态) 一般不用 v-leave-active（离开中，过渡状态） v-leave（离开前，离开过渡状态） v-leave-to(离开结束，离开过渡的结束状态) 一般不用 

二、CSS动画

1.CSS动画同CSS过渡,也需要四个类，active类中放的是animation,需要指定关键帧，关键帧使用transform定义动画状态，当设置了transition的name属性之后，vue会自动去探测是否存在这几个类，如果有，就执行了类中的动画

2.自定义动画，通常用于和第三方动画库相结合

    <transition         enter-active-class="animated tada"        leave-active-class="animated bounceOutRight"    >         <p v-if="show">hello</p>    </transition>

　　为transition标签设置以下几个属性来指定动画需要的类,这几个类的优先级高于普通类，与第三方动画库相结合时十分有用

(1)enter-active-class(2)enter-class(3)enter-to-class(4)leave-active-class(5)leave-class(6)leave-to-class

三、使用钩子函数设置动画

　　可以通过在transition标签中绑定钩子函数来设置过渡动画，几个钩子函数如下：

钩子函数对应的参数before-enter(el)enter(el,done)after-enter(el)enter-cancelled(el)before-leave(el)leave(el,done)after-leave(el)leave-cancelled(el)

通常在before-enter或before-leave中指定状态，在enter或leave函数中执行动画

    beforeEnter: function (el) {        // 进入之前        $(el).css({            opacity: 0,            color: 'red',        });    },        enter:  function (el, done) {            // 第一种        $(el).animate({            opacity:1,        },3000,function(){            //需要在动画执行完毕的回调函数中调用done            done();        })            //  第二种        $(el).fadeIn(1000,()=>{            done();        })                // 第三种 引入velocity动画库        <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>                Velocity(el, {opacity: 1, translateX: '20px', fontSize: '2em'}, {duration: 300});        Velocity(el, {translateX: '0px', fontSize: '1em'}, {complete: done})            },            

　　当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。

四、初始渲染的过渡

通过为transition标签添加appear属性设置节点在初始渲染时的过渡效果

1. 同样可以定义自定义类名
   
   appear-class
   
   appear-to-class
   
   appear-active-class
   

2. 通过可以定义JavaScript中的钩子函数
   
   before-appear
   appear
   after-appear
   appear-cancelled

3. 为transiton设置appear属性，如果没有对应的过渡类或者钩子函数会默认去执行before-enter,和enter钩子函数的内容

五、多元素的过渡

注意相同标签切换需要设置key属性：

　　当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容

transition标签内部最外部根节点只能有一个，但通过v-if,v-else-if,v-else设置切换时候可以有多个跟标签

六、过渡模式

为transition标签设置mode属性

(1)in-out:新元素先进行过渡，完成之后当前元素过渡离开(2)out-in:当前元素先进行过渡，完成之后新元素过渡进入

七、多组件过渡

　　使用v-bind:is属性为保留组件component来指定要渲染成哪个组件

    <transition name="component-fade" mode="out-in">        <component v-bind:is="view"></component>    </transition>

八、列表过渡

　　使用tranistio-group标签来为多个节点设置过渡
tranistio-group标签默认渲染成span标签，可通过为其设置tag="div"属性将其渲染成div
tranistio-group内部元素总是需要 提供唯一的 key 属性值

九、列表位移过渡

transition-group标签添加v-move属性定义元素位置改变时使用的动画，同进入和离开动画一样，v会被替换成transition-group便签的name属性，也可以通过move-class自定义类来设置自定义位移时使用的类
当要设置离开时的位移过渡时需要设置绝对定位position:absolute

    <!--filp-list为transition-group便签的name属性-->    .flip-list-move {        transition: transform 1s;    }

十、Lazy sudoku

通过tranistion-group标签设置随机数独元素的切换，注意transition-group内的每个元素的v-bind:key需要绑定的和元素相关，不然只是简单的数字替换，非元素的移动

CSS:        * {            box-sizing: border-box;        }        .box {            display: block;            margin: 0 auto;            width: 450px;            height: 450px;        }        .item {            display: inline-block;            width: 50px;            height: 50px;            line-height: 50px;            border: 1px solid #eee;            text-align: center;            color: #666;        }        .fade-move {            transition: all 0.4s linear;        }        HTML:    <div >        <transition-group name="fade" class="box">            <span v-for="item in numArr" :key="item.id" class="item" :style="item.bg">{{ item.num }}</span>        </transition-group>    </div>            JavaScript    var app = new Vue({        el: '#app',        data: {            numArr: new Array(81).fill(1).map((value, index) => {                return {                    num: (index % 9),                    id: index,                    bg:{                        backgroundColor:'hsl(' + Math.floor(Math.random() * 360) + ',70% ,80%)'                    }                }            }),        },        methods: {            shuffle: function () {                this.numArr.sort(function () {                    return Math.random() - 0.5;                });            }        },        created: function () {            this.shuffle();        }    }); 

十一、可复用的过渡

　　将transition或者transition-group标签作为组件的根标签即可实现可复用的过渡