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>