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 完成之后移除。