vue 动画过渡

最新推荐文章于 2024-05-06 18:26:11 发布

清，纯一色

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xuanan/p/7868848.html

版权

一、过渡(动画)

　　1、简介

　　　　Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，本质上还是使用CSS3动画：transition、animation

　　2、基本用法

　　　　 1、使用transition组件，将要执行动画的元素包含在该组件内就可以了即 <transition> 运动的元素</transition>

　　　　2、过滤的CSS类名：　　

　　　　　　1、v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。　　

　　　　　　2、v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

　　　　　　3、v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。　　　

　　　　　　4、v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

　　　　　　5、v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

　　　　　　6、v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

　　　　3、示例：

<!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

　　3、动画内的钩子函数

　　4、结合第三方动画库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

　　5、多元素动画

　　　 <transition-group>

转载于:https://www.cnblogs.com/xuanan/p/7868848.html

清，纯一色

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 动画过渡

一、过渡(动画)　　1、简介　　　　Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，本质上还是使用CSS3动画：transition、animation　　2、基本用法　　　　 1、使用transition组件，将要执行动画的元素包含在该组件内就可以了即 <transition> 运动的元素</transition> ...
复制链接

扫一扫