W3School CSS3過(guò)渡

• 瀏覽器支持
  Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 屬性。Safari 需要前綴 -webkit-。

  注釋：Internet Explorer 9 以及更早的版本，不支持 transition 屬性。
  注釋：Chrome 25 以及更早的版本，需要前綴 -webkit-。

• 如何工作
  CSS3 過(guò)渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。
  要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：

  • 規(guī)定您希望把效果添加到哪個(gè) CSS 屬性上
  • 規(guī)定效果的時(shí)長(zhǎng)

• 過(guò)渡屬性

  屬性描述CSS

  transition	簡(jiǎn)寫(xiě)屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬。	3
  transition-property	規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱(chēng)。	3
  transition-duration	定義過(guò)渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。	3
  transition-timing-function	規(guī)定過(guò)渡效果的時(shí)間曲線。默認(rèn)是 “ease”。	3
  transition-delay	規(guī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0。	3

• 用法

  • 單項(xiàng)變化

    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>請(qǐng)把鼠標(biāo)指針?lè)诺近S色的 div 元素上，來(lái)查看過(guò)渡效果。</p>

  • 多項(xiàng)變化（如需向多個(gè)樣式添加過(guò)渡效果，請(qǐng)?zhí)砑佣鄠€(gè)屬性，由逗號(hào)隔開(kāi)）

    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>請(qǐng)把鼠標(biāo)指針?lè)诺近S色的 div 元素上，來(lái)查看過(guò)渡效果。</div>

Vuejs過(guò)渡效果

概述

---

Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果。
包括以下工具：

• 在 CSS 過(guò)渡和動(dòng)畫(huà)中自動(dòng)應(yīng)用 class
• 可以配合使用第三方 CSS 動(dòng)畫(huà)庫(kù)，如 Animate.css
• 在過(guò)渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 動(dòng)畫(huà)庫(kù)，如 Velocity.js

單元素/組件的過(guò)渡

---

Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加 entering/leaving 過(guò)渡

• 條件渲染 （使用 v-if）
• 條件展示 （使用 v-show）
• 動(dòng)態(tài)組件
• 組件根節(jié)點(diǎn)

這里是一個(gè)典型的例子：

<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 }

當(dāng)插入或刪除包含在 transition 組件中的元素時(shí)，Vue 將會(huì)做以下處理：

1. 自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了 CSS 過(guò)渡或動(dòng)畫(huà)，如果是，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類(lèi)名。

如果過(guò)渡組件提供了 JavaScript 鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用。

如果沒(méi)有找到 JavaScript 鉤子并且也沒(méi)有檢測(cè)到 CSS 過(guò)渡/動(dòng)畫(huà)，DOM 操作（插入/刪除）在下一幀中立即執(zhí)行。(注意：此指瀏覽器逐幀動(dòng)畫(huà)機(jī)制，與 Vue，和Vue的 nextTick 概念不同)

#過(guò)渡的-CSS-類(lèi)名

會(huì)有 4 個(gè)(CSS)類(lèi)名在 enter/leave 的過(guò)渡中切換

v-enter: 定義進(jìn)入過(guò)渡的開(kāi)始狀態(tài)。在元素被插入時(shí)生效，在下一個(gè)幀移除。

v-enter-active: 定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入時(shí)生效，在 transition/animation 完成之后移除。

v-leave: 定義離開(kāi)過(guò)渡的開(kāi)始狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)生效，在下一個(gè)幀移除。

v-leave-active: 定義離開(kāi)過(guò)渡的結(jié)束狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)生效，在 transition/animation 完成之后移除。

總結(jié)

以上是生活随笔為你收集整理的CSS3动画和VUE动画整理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。