[JavaScript知识库]Vue中使用 transition标签实现动画的 4种方法 (八)

一、Vue中的过度动画(无name属性的transition)

vue提供了一个过渡动画的标签transition:
1.只能对一个元素有效
2.主要是给v-if(v-show)或动态组件,在切换的时候添加动态效果.
动画进入前的三个类 1. .v-enter 2…v-enter-active 3…v-enter-to (1.进入,2.进入过程,3.进入后)
动画离开的是哪个类 1. .v-leave 2…v-leave-active 3…v-leave-to (1.离开 2.离开过程 3.离开后)

CSS样式如下:

 <style>
        .div {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        /* 添加过渡效果 */
        /* 元素显示/入场的时候 */
        
        .v-enter {
            /* 元素在入场开始的样式 */
            opacity: 0;
            height: 0;
        }
        
        .v-enter-active {
            /* 元素入场进行时的样式 设置过度的时间*/
            transition: all 3s;
        }
        
        .v-enter-to {
            /* 元素在入场结束的样式 */
            opacity: 1;
            height: 200px;
        }
        /* 元素隐藏/离场的时候 */
        
        .v-leave {
            /* 元素隐藏的开始的时候 */
            opacity: 1;
            height: 200px;
        }
        
        .v-leave-active {
            /* 元素隐藏的过程 */
            transition: all 3s;
        }
        
        .v-leave-to {
            /* 元素隐藏的结束的时候 */
            opacity: 0;
            height: 0px;
        }
        
        .div2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
       
    </style>

DOM结构如下:

 <div id="app">
        <button @click="show=!show">show/hide</button>
        <!-- 第一个transition -->
        <transition>
            <div v-show='show' class="div">淡入淡出的效果</div>
        </transition>

    </div>

JS代码如下

<script>
	//创建实例
    var app = new Vue({
        el: '#app',
        data: {
            show: false
        },
    })
</script>

二、Vue中的过度动画(有name属性的transition)

CSS类的样式实现

	 /* 其中样式相同的transition类可以进行和并 */
        
        .fade-enter,
        .fade-leave-to {
            transform: translateX(400px);
        }
        
        .fade-enter-active,
        .fade-leave-active {
            transition: all 3s;
        }
        
        .fade-enter-to,
        .fade-leave {
            transform: translateX(0px);
        }
        

tansition标签添加动画的标签

 <div id="app">
        <!-- vue提供了一个过渡动画的标签transition: 
            1.只能对一个元素有效 
            2.主要是给v-if(v-show)或动态组件,在切换的时候添加动态效果.  -->
        <button @click="show=!show">show/hide</button>
        <!-- 第二个transition: name属性可以区分不同元素的过度动画-->
        <transition name="fade">
            <div v-show='show' class="div2">淡入淡出的效果</div>
        </transition>
    </div>
    

JavaScript代码

<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: false
        },

    })
</script>

三、Vue中的关键帧动画

CSS样式如下:

 <style>
        @keyframes leaveAnimation {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(-90deg);
            }
            100% {
                transform: translate(-100px, 0) rotate(-90deg);
            }
        }
        
           /*添加animation动画的类*/
        .leaveAni {
            animation: leaveAnimation 3s;
        }
        
        @keyframes enterAnimation {
            0% {
                transform: translate(-100px, 0) rotate(-90deg);
            }
            50% {
                transform: rotate(-90deg);
            }
            100% {
                transform: translate(0, 0) rotate(0deg);
            }
        }
        
         /*添加animation动画的类*/
         
        .enterAni {
            animation: enterAnimation 2s;
        }
        
        .d1 {
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
    </style>

DOM结构如下

<div id="app">
        <input type="checkbox" v-model="show">
        <transition enter-active-class="enterAni" leave-active-class="leaveAni">
            <!-- enter-active-class="" 元素入场的动画类   leave-active-class="" 元素离场的动画类-->
            <div v-show='show' class="d1">4654654</div>
        </transition>
    </div>

JS代码

<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: false
        },

    })
</script>

四、vue中的js动画

Vue官网的JS动画钩子

CSS样式代码

 <style>
        .d1 {
            width: 100px;
            height: 100px;
            background-color: rgb(209, 119, 9);
        }
    </style>

DOM结构

 <div id="app">
        <!--@before-enter="" 在元素显示(入场)之前的钩子  @enter="" 在元素显示(入场)过程的钩子  
            @before-leave="" 在元素隐藏(离场)之前的钩子  @leave="" 在元素隐藏(离场)过程的钩子
        
        -->
        <input type="checkbox" v-model="show">
        <transition @before-enter="showBefore" @enter="enter" @before-leave="hideLeave" @leave="leave">
            <div v-show='show' class="d1">4654654</div>
        </transition>
    </div>

Vue中的JS动画设置(用到了js动画钩子)

 var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            //动画钩子
            showBefore(el) {
                //el就是做动画的元素
                el.style.opcity = 0; //设置显示之前的样式
            },
            enter(el, done) {
                // el 是触发动画的元素 
                // done是一个函数,当一个动画结束的时候需要手动调用done (保证动画结束)
                // el.style.opcity += 0.1
                function updata() {
                    el.style.opcity = el.style.opcity * 1 + 0.01024
                    if (el.style.opcity * 1 < 1) {
                        requestAnimationFrame(updata)
                    } else {
                        //动画结束调用done终止动画
                        done()
                    }
                };
                updata()
            },
            hideLeave(el) {
                el.style.opcity = 1
            },
            leave(el, done) {

                function update() {
                    el.style.opcity = el.style.opcity * 1 - 0.01024
                    if (el.style.opcity * 1 > 0) {
                        requestAnimationFrame(update)
                    } else {
                        //动画结束调用done终止动画
                        done()
                    }
                };
                update()
            }

        },
    })