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 类名。

1. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

2. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，与 Vue，和Vue的 nextTick 概念不同)

#过渡的-CSS-类名

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

1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

   1. v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。

   2. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

   3. v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。