十分钟学会vue动画

2401_84434086

于 2024-05-02 16:02:31 发布

阅读量891

点赞数 6

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84434086/article/details/138393732

版权

179 篇文章 0 订阅

订阅专栏

原生动画

vue动画

Document

<button @click=“isEnd = !isEnd”>vue动画

对比三份代码，我们可以看出vue动画，还是需要一些css和js来处理

transition 组件

通过 transition 组件包裹的元素或组件，会触发过渡，并添加指定的 class 样式

…

这里的name就是一个有动画效果的类名，绑定上来之后可以在后续加上条件

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除

我们可以通过代码来看

.slide-fade-enter 动画开始时执行的

.slide-fade-enter-to 动画结束时执行的

.slide-fade-enter-active 像是一个总控一样，可以写一些过度，比如说执行时间，运动速度，播放次数之类的

然后我们可以通过下图，更加直观的了解vue动画的上述指令

在这里插入图片描述

上边都说的是进入，我们现在可以加上离开，而且方式很简单

现在我们就加上离开了，是不是很神奇！

其实我们先就可以看出来，vue没有自己的动画，他只是在css3动画上多了一个控制器而已！

触发方式

结合Animate.css动画库

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

关注