-
css动画
-
js动画
-
vue动画
css动画
Document .js_animation_box { width: 100px; height: 100px; background: red; transition: .5s all; } .js_animation_box.end { width: 200px; height: 200px; background: green; }原生动画
js动画
Document .js_animation_box { width: 100px; height: 100px; background: red; }原生动画
vue动画
Document .js_animation_box { width: 100px; height: 100px; background: red; transition: .5s all; } .js_animation_box.end { width: 200px; height: 200px; background: green; }<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 { opacity: 0; } .slide-fade-enter-to { opacity: 1; } .slide-fade-enter-active { transition: all 3s ease; }.slide-fade-enter 动画开始时执行的
.slide-fade-enter-to 动画结束时执行的
.slide-fade-enter-active 像是一个总控一样，可以写一些过度，比如说执行时间，运动速度，播放次数之类的
然后我们可以通过下图，更加直观的了解vue动画的上述指令
上边都说的是进入，我们现在可以加上离开，而且方式很简单
... .slide-fade-enter,.slide-fade-leave-to{ opacity: 0; ### 最后 在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。 包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。 * HTML5新特性，语义化 * 浏览器的标准模式和怪异模式 * xhtml和html的区别 * 使用data-的好处 * meta标签 * canvas * HTML废弃的标签 * IE6 bug，和一些定位写法 * css js放置位置和原因 * 什么是渐进式渲染 * html模板语言 * meta viewport原理   **开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
