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 id="app">
        <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标签作为组件的根标签即可实现可复用的过渡

转载于:https://www.cnblogs.com/baimaoccc/p/7487176.html