原生动画
vue动画
<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动画上多了一个控制器而已!
触发方式
-
条件渲染 (使用
v-if
) -
条件展示 (使用
v-show
) -
动态组件
-
组件根节点
结合Animate.css动画库
文末
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。