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: 定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。

v-enter-active: 定義進入過渡的結束狀態。在元素被插入時生效，在 transition/animation 完成之后移除。

v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。

v-leave-active: 定義離開過渡的結束狀態。在離開過渡被觸發時生效，在 transition/animation 完成之后移除。

總結

以上是生活随笔為你收集整理的CSS3动画和VUE动画整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。