Vue之过渡与动画

时间 2019-11-08

标签 vue 过渡动画繁體版

原文原文链接

Vue之过渡与动画

进入&离开单元素过渡

Vue在跟新、插入或移除DOM时，提供多种不一样的过渡效果，

1.在css过渡和动画中自动应用class，

2.能够配合第三方的动画库，好比animate.css

3.在过渡钩子函数中使用Javascript直接操做DOM,

4.能够配合第三方的Javascript库，好比velocity.js

过渡效果

1.单元素/组件过渡

1.css过渡

        /* fade对应html元素transition的name值，其余都是固定的。 */
        .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
        }
        .fade-enter, .fade-leave-active {
        opacity: 0
        }

<div id="box">
        <button @click="handleClick">点击隐藏p标签</button>
        <!-- 过渡效果transition -->
        <transition name="fade">
            <p v-show="isShow">111111111</p>
        </transition>
</div>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

2.css动画

        /* css动画效果animate,确保html元素transition的name和类开始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

　　　　　　<button @click="handleClick">点击隐藏p标签</button>

        <!-- css动画效果animate -->
        <transition name="bounce">
            <p v-show="isShow">222222222</p>
        </transition>

    var vm = new Vue({
        el:'#box', data:{ isShow:true, }, methods: { handleClick(){ this.isShow = !this.isShow; }, }, })

3.结合animate.css动画库

　　　　引入 <link rel="stylesheet" href="../css/animate.css">

　　　　　　<button @click="handleClick">点击隐藏p标签</button>

        <!-- css动画库引用的实现，首先须要引用animate.css的动画库，animated的后面就是动画的名称,能够去github上搜索animate.css查找动画的名字，进行随意的组合 -->
        <transition name=""
        enter-active-class="animated flipInX"
        leave-active-class="animated fadeOutUp">
            <p v-show="isShow">3333333333</p>
        </transition>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

2.初始渲染过渡

//appear appear-active-class

        /* css动画效果animate,确保html元素transition的name和类开始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

　　　　　　<button @click="handleClick">点击隐藏p标签</button>

        <!-- 一开始就呈现动画 -->
        <transition name="bounce" appear appear-active-class="bounce-enter-active">
            <p v-show="isShow">4444444444</p>
        </transition>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

3.多个过渡元素(设置key)

当有多个相同标签名的元素切换时，须要经过key特性设置惟一的值来标记进行各个元素的切换

mode:in-out;out-in

        /* css动画效果animate,确保html元素transition的name和类开始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

        <button @click="handleClick">点击隐藏p标签</button>
        <!-- 多个元素过渡，当有多个相同标签名的元素切换时，须要经过key特性设置惟一的值来标记进行各个元素的切换，若是一个是p元素一个是div元素，那就不要紧。动画效果也能够控制，添加mode属性in-out表示先来再走，意思是第二个元素实现以后在让第一个动画呈现，也有out-in效果，先走再来，mode只支持这两种模式 -->
        <transition name="bounce" mode="out-in">
            <p v-if="isShow" key="1">v-if显示</p>
            <p v-else key="2">v-else显示</p>
        </transition>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

4.多个组件过渡

　　　　能够参看上一篇文章最后一个例子

5.列表过渡（设置key）

transition-group不一样与transition,它会以一个真实的元素呈现，默认为一个span，你也能够经过tag属性来更改成其余元素

提供惟一的key属性

        /* css动画效果animate,确保html元素transition的name和类开始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

        <!-- 多个列表过渡,使用transition-group，并对li设置key值，通常最好用data.id来设置，若是用index代替，index会有一个问题，添加的时候没问题，由于多了最后一个元素，这个没问题，删除的时候，删除的元素没问题，可是动画只会使用到最后一个元素，用data没问题，若是之后要删除元素，修改元素，或者修改位置这种，必定要设置成非index索引值，才能正常识别 -->
        <input type="text" v-model="myText">
        <button @click="addLi">add</button>
            <transition-group tag="ul" name="bounce" >
                <!-- index表示索引值 -->
                <li v-for="(data,index) in dataList" :key="data">{{data}}<button @click="delLi(index)">delete</button></li>
            </transition-group>

    var vm = new Vue({
        el:'#box',
        data:{
            myText:'',
            dataList:[],
        },
        methods: {
            addLi(){
                this.dataList.push(this.myText);
            },
            delLi(index){
                this.dataList.splice(index,1);
            },
        },
    })

6.可复用过渡

        /* 可复用过渡 */
        .slideIn{height: 100%;position: fixed;width: 50%;background: #333;}
        .sliIn-enter-active{animation: sliIn-in .5s;}
        .sliIn-leave-active{animation: sliIn-in .5s reverse;}
        @keyframes sliIn-in {
            0%{transform: translateX(-100%);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

         <button @click="handleClick">点击隐藏p标签</button>
       <!-- 可复用过渡,能够将这个组件进行屡次的引用， -->
            <rezujian>
                <transition name="sliIn">
                    <div class="slideIn" v-if="isShow"></div>
                </transition>
            </rezujian>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
        components:{
            rezujian:{
                template:`<slot></slot>`,
            }
        }
    })