vue动画原理 | 易学教程

vue官方动画之transition标签

在vue中如果要给某个元素标签加动画，那么他就需要在这个元素标签外使用<transition name="fade">要展示动画的元素标签</transition>标签中的name属性会成为唯一标识，因为一个页面是允许出现多个不同的动画

这样vue在compile编译的时候才能识别到你这是要给我的标签加动画，这样vue底层就会进行一系列的操作，最主要操作就是给要展示动画的元素标签在不同的时刻添加和删除class类名

通过vue自动给要展示动画的元素标签添加的class类名我们就可以给他写相应css动画效果

添加类名的过程详解

当这个元素标签从隐藏到展示时，最先添加的是name-enter类名，他表示“我现在告诉一下大家，我要开始展示了”，随之立马添加的类名是fade-enter-active这个类名在动画过程中一直存在，而fade-enter类名再通知完大家之后就消失移除了，一开始展示的会添加的类名是fade-enter-to图解如下

从展示到隐藏原理类似，只是添加的类名不同，同样的当元素标签要消失时，他会通知一声我要over了，这时添加的类名是fade-leave类名，通知完就移除了，同样一直存在于消失动画过程中的类名是fade-leave-active，而一开始要消失会添加的类名是fade-leave-to，图像如下

demo示例之显示隐藏简单动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中css动画原理</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
    <style>
    .fade-enter{
        opacity: 0;
    }
    .fade-enter-active{
        transition: opacity 3s;
    }
    .fade-leave-to{
        opacity: 0;
    }
    .fade-leave-active{
        transition: opacity 3s;
    }
    </style>
</head>
<body>
    <div id="root">
        <transition name="fade" mode="">
            <div v-if="isShow">HELLO WORLD</div>
        </transition>
        
        <button @click="toggle">切换</button>
    </div>


    <script>
    var vm = new Vue({
        el:'#root',
        data () {
            return {
                isShow:true
            }
        },
        methods: {
            toggle(){
                this.isShow = !this.isShow;
            }
        }
    });
    </script>
</body>
</html>

demo示例之使用css3中@keyframes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中css动画原理</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
    <style>
    @keyframes bounce-in{
        0%{
            transform: scale(0);
        }
        50%{
            transform: scale(1.5);
        }
        100%{
            transform: scale(1);
        }
    }
    .fade-enter-active{
        transform-origin: left center;
        animation: bounce-in 2s;
    }
    .fade-leave-active{
        transform-origin: left center;
        animation: bounce-in 2s;
    }
    </style>
</head>
<body>
    <div id="root">
        <transition name="fade" mode="">
            <div v-if="isShow">HELLO WORLD</div>
        </transition>
        
        <button @click="toggle">切换</button>
    </div>


    <script>
    var vm = new Vue({
        el:'#root',
        data () {
            return {
                isShow:true
            }
        },
        methods: {
            toggle(){
                this.isShow = !this.isShow;
            }
        }
    });
    </script>
</body>
</html>

vue动画还有一个知识就是vue给我们的指定元素添加的类名如fade-enter fade-enter-active fade-leave-active fade-leave-to等这些类名都不是固定，是可以自己指定的，使用外部别人写好的动画效果就需要知道如何来修改这些类名，修改方法如下只在在transtion标签上修改指定如

<transition enter-active-class="自己想指定的名字" leave-active-class="自己想指定的名字">要添加动画的元素标签</transition>

<transition enter-class="自己想指定的名字" leave-class="自己想指定的名字">要添加动画的元素标签</transition>

<transition enter-to-class="自己想指定的名字" leave-to-class="自己想指定的名字">要添加动画的元素标签</transition>

以上的animation动画如果每次都自己写，这样是很烦的，这里提供一个animate.css他提前写好了很多很好使用的css3动画，我们只需要去他官网看看他的效果https://daneden.github.io/animate.css/使用的时候只需要将他的css文件下载到本地并引入css文件即可

demo示例之使用animate.css

使用animate提供的动画需要在指定类名的时候必须指定animated然后再加一个你想要的动画类名，类名都可以在他的官网看到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中css动画原理</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
</head>
<body>
    <div id="root">
        <transition name="fade" enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
            <div v-if="isShow">HELLO WORLD</div>
        </transition>
        
        <button @click="toggle">切换</button>
    </div>


    <script>
    var vm = new Vue({
        el:'#root',
        data () {
            return {
                isShow:true
            }
        },
        methods: {
            toggle(){
                this.isShow = !this.isShow;
            }
        }
    });
    </script>
</body>
</html>

以上的demo使用的是bootcdn提供的cdn链接，如果是真实上线的项目建议使用本地文件js和css

来源：CSDN

作者：webprevious

链接：https://blog.csdn.net/weixin_32682577/article/details/82981042

标签

vue