CSS3动画和VUE动画整理

W3School CSS3过渡

浏览器支持
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。
如何工作
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长

过渡属性

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

用法

单项变化

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}div:hover
{
width:300px;
}<div></div><p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>

多项变化（如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开）

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
<div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div>

Vuejs过渡效果

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

条件渲染（使用 v-if）
条件展示（使用 v-show）
动态组件
组件根节点

这里是一个典型的例子：

<div id="demo"><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition>
</div>

new Vue({el: '#demo',data: {show: true}
})

.fade-enter-active, .fade-leave-active {transition: opacity .5s
}
.fade-enter, .fade-leave-active {opacity: 0
}

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，与 Vue，和Vue的 nextTick 概念不同)

#过渡的-CSS-类名

会有 4 个(CSS)类名在 enter/leave 的过渡中切换

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
1. v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
2. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
3. v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

Transition Diagram