vue 動畫過渡

時間 2019-12-14

標籤 vue 動畫過渡简体版

原文原文鏈接

1、過渡(動畫)css

　　一、簡介html

　　　　Vue 在插入、更新或者移除 DOM 時，提供多種不一樣方式的應用過渡效果，本質上仍是使用CSS3動畫：transition、animationvue

　　二、基本用法ide

　　　　一、使用transition組件，將要執行動畫的元素包含在該組件內就能夠了即 <transition> 運動的元素</transition> 函數

　　　　二、過濾的CSS類名：　　動畫

　　　　　　一、v-enter：定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。　　spa

　　　　　　二、v-enter-active：定義過渡的狀態。在元素整個過渡過程當中做用，在元素被插入時生效，在 transition/animation 完成以後移除。這個類能夠被用來定義過渡的過程時間，延遲和曲線函數。code

　　　　　　三、v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入一幀後生效 (於此同時 v-enter 被刪除)，在 transition/animation 完成以後移除。　　　htm

　　　　　　四、v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。blog

　　　　　　五、v-leave-active：定義過渡的狀態。在元素整個過渡過程當中做用，在離開過渡被觸發後當即生效，在 transition/animation 完成以後移除。這個類能夠被用來定義過渡的過程時間，延遲和曲線函數。

　　　　　　六、v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發一幀後生效 (於此同時 v-leave 被刪除)，在 transition/animation 完成以後移除。

　　　　三、示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫</title>
    <script src="js/vue.js"></script>
    <style>
        p{
            width: 300px;
            height: 300px;
            background-color:red;
        }
        .fade-enter-active,.fade-leave-active{//表示漸入和漸出的時候要用什麼樣的動畫效果
            transition:all 3s ease;        //全部元素  時間  快慢程度
        }
        .fade-enter-active{//漸入
            opacity:1;                    //透明度
            width:300px;
            height:300px;
        }
        .fade-leave-active{//漸出
            opacity:0;  
            width:50px;
            height:50px;
        }
        /* .fade-enter須要放在.fade-enter-active的後面 */
        .fade-enter{
            opacity:0;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body>
    <div id="itany">
        <button @click="flag=!flag">點我</button>
        
        <transition name="fade" 
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            @before-leave="beforeLeave"
            @leave="leave"
            @after-leave="afterLeave"
        >
            <p v-show="flag">網博</p>
        </transition>
    </div>

    <script>
        var vm=new Vue({
            el:'#itany',
            data:{
                flag:false
            },
            methods:{
                beforeEnter(el){
                    // alert('動畫進入以前');
                },
                enter(){
                    // alert('動畫進入');
                },
                afterEnter(el){
                    // alert('動畫進入以後');
                    el.style.background='blue';
                },
                beforeLeave(){
                    // alert('動畫即將以前');
                },
                leave(){
                    // alert('動畫離開');
                },
                afterLeave(el){
                    // alert('動畫離開以後');
                    el.style.background='red';
                }
            }
        });
    </script>
    
</body>
</html>

View Code

　　三、動畫內的鉤子函數

　　四、結合第三方動畫庫animate..css一塊兒使用

　　　　</transition>

　　　　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫</title>
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/vue.js"></script>
    <style>
        p{
            width: 300px;
            height: 300px;
            background-color:red;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div id="itany">
        <button @click="flag=!flag">點我</button>
        
        <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
            <p v-show="flag">網博</p>
        </transition>
    </div>

    <script>
        var vm=new Vue({
            el:'#itany',
            data:{
                flag:false
            }
        });
    </script>
    
</body>
</html>

View Code

　　五、多元素動畫

　　　 <transition-group>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。