vue 动画和过渡v-enter，v-enter-active，v-enter-to，v-leave，v-leave-active，v-leave-to详解

vue 动画和过渡v-enter，v-enter-active，v-enter-to，v-leave，v-leave-active，v-leave-to详解今天学习vue的动画的时候，学到了Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换，但是觉得类有点多，觉得记忆有点混乱，于是决定弄清楚每个类的具体作用和效果以便于记忆，但是看教程的时候总觉得解释得不够通俗易懂，对于初学者来说很

Je pense a toii

6720人浏览 · 2020-11-17 11:41:56

Je pense a toii · 2020-11-17 11:41:56 发布

vue 动画和过渡v-enter，v-enter-active，v-enter-to，v-leave，v-leave-active，v-leave-to详解

今天学习vue的动画的时候，学到了Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换，但是觉得类有点多，觉得记忆有点混乱，于是决定弄清楚每个类的具体作用和效果以便于记忆，但是看教程的时候总觉得解释得不够通俗易懂，对于初学者来说很难理解，于是自己去看了很多资料加上自己实验，最后终于明白了是怎么一回事。
在这里插入图片描述
先贴上我的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue过渡和动画</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fadee-enter{
    opacity: 0.1;
    background-color: green;
}
.fadee-enter-active{
    transition: all 3s;
}
.fadee-enter-to{
    opacity: 0.7;
    background-color: red;
}
.fadee-leave{
    opacity: 0.9;
    background-color: red;
    font-size: 50px;
}
.fadee-leave-active{
    transition: all 3s;
}
.fadee-leave-to{
    opacity: 0.1;
    background-color: palegreen;
    font-size: 10px;
}
</style>
</head>
<body>
    <div id = "databinding">
        <button v-on:click = "show = !show">点我</button>
        <transition name = "fadee">
            <div v-show = "show" v-bind:style = "styleobj">动画实例</div>
        </transition>
    </div>
    <script type = "text/javascript">
        var vm = new Vue({
        el: '#databinding',
            data: {
                show:true,
                styleobj :{
                    border : '1px solid black',
                    width : '100px',
                    height : '100px'
                }
            },
            methods : {
            }
        });
    </script>
</body>
</html>

（1）v-enter：点击按钮，元素刚刚出现的时候你看到的样式就是v-enter中定义的样式，然后开始过渡，变成v-enter-to中定义的样式
（2）v-enter-active：这个样式定义了出现动画中从v-enter到v-enter-to样式过渡变化所需要的时间，以及定义哪些样式是要要过渡的，以及过渡的方式，比如均匀变化，先快后慢变化等等。
（3）v-enter-to：v-enter经过变化后变成的样式，注意出场动画到这里变为了v-enter-to的样式就结束了，然后就会突然变为元素本来的样式，这样看来变化会有点突兀，所以一般不会去定义这个样式，这样就会动画自动就会从v-enter样式过渡到元素本来的样式，这样看起来比较自然一些。
（4）v-leave：类比以上就很相似了，点击按钮，离开动画最先开始就是这个类里面的样式，一般很难看到
（5）v-leave-active：定义从v-leave到v-leave-to样式变化所需时间等
（6）v-leave-to：离开动画经过过渡后变成的样式，注意，变成这个样式之后，元素会直接突然消失。
总结：
1.v-enter-to，v-leave一般不写，不写的原因是：按照一般的过渡效果（动画），进入的最后状态就是元素本身的样式，离开的最初状态也是元素本身的样式，所以是没有必要写的。
2.v-enter, v-leave-to中的css一般相同，一个是进入时过渡（动画）的初始样式，一个是离开过渡（动画）结束时的样式。
3.v-enter-active ，v-leave-active 中的css一般相同，一般都是用于定义过渡（动画）的过程时间，延迟和曲线函数。当然离开的过渡（动画）的过程时间，延迟和曲线函数和进入的可以是不同的。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^