19vue学习——使用过渡类名实现动画

最新推荐文章于 2024-01-17 13:08:31 发布

0563xixi

最新推荐文章于 2024-01-17 13:08:31 发布

阅读量200

点赞数 4

本文链接：https://blog.csdn.net/weixin_42530160/article/details/98450107

版权

19vue学习——使用过渡类名实现动画

前言

我们之前学习了如何用 css3 来实现炫酷的动画效果了，现在我们在学习 vue 框架了，我们可能会问：那 vue 有没有给我们也提供这么炫酷的动画效果呢？答案是肯定的啦，但是只提供了一些实现简单动画的过渡类名，并没有 css3 那么炫酷的动画效果。但是在我看来动画是为了更好的让客户理解我们的产品和提高用户的体验度，这样子的动画效果也是足够我们使用的了。接下来让我们一起来学习吧！

1.过渡类名介绍

在进入/离开的过渡中，会有 6 个 class 切换。

（1）v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

（2）v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

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

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

（5）v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

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

总：两个半场动画——四个时间点和两个时间段之间的关系
进入的动画:
两个时间点：v-enter 、v-enter-to
一个时间段：v-enter-active
离开的动画：
两个时间点：v-leave 、v-leave-to
一个时间段：v-leave-active
(v-enter 和 v-leave-to 状态一致 ) ( v-leave 和 v-enter-to 状态一致)

2.如何使用过渡类名

（1）使用 transition 元素，把需要被动画控制的元素包裹起来——transition 元素是 vue 官方提供的

（2）自定义两组样式来控制 transition 内部的元素实现动画

第一组
v-enter —— 这是时间点，是进入之前，元素的起始状态，此时还没有进入
v-leave-to —— 这是时间点，是进离开之后，离开的终止状态，此时动画已经结束

第二组
v-enter-active 和 v-leave-active —— 控制动画持续的时间、控制那些属性的改变，过渡的状态

注：v-enter-to 和 v-leave 表示的是已经进入的时候和准备离开之前的状态，是之前设置好的样式即可，所以这里是不用设置的

总：所以需要在样式中设置 v-enter v-leave-to 和 v-enter-active v-leave-active 两组样式

3.使用过渡类名的总代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用过渡类名实现动画</title>
    <!--设置过渡类样式-->
    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 1s ease;
        }
    </style>
</head>
<body>
    <div class="body">
        <!-- 不使用动画的时候 -->
        <input type="button" value="toggle" @click="flag1=!flag1">
        <h3 v-if="flag1">我是没有使用动画的h3标题</h3>

        <hr>

        <!-- 使用过渡类名实现动画的时候 -->
        <input type="button" value="toggle" @click="flag2=!flag2">
        <transition>
            <h3 v-if="flag2">我是使用了过渡类名实现动画的h3标题</h3>
        </transition>
    </div>
    <script src="../lib/vue-2.4.0.js"></script>
    <script>
        let vm = new Vue({
            el:".body",
            data:{
                flag1:true,
                flag2:false,
            }
        })
    </script>
</body>
</html>