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

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

动画 vue

打开边栏(ESC) 关闭边栏(ESC)

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

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

from clipboard

先贴上我的代码

<!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一般相同，一般都是用于定义过渡（动画）的过程时间，延迟和曲线函数。当然离开的过渡（动画）的过程时间，延迟和曲线函数和进入的可以是不同的。

赏