1：基本概念

在一定時(shí)間內(nèi)平滑的過渡，也就是圓滑的以動畫效果改變css的屬性值。它的過渡可以由鼠標(biāo)點(diǎn)擊、焦點(diǎn)獲取或者失去、被點(diǎn)擊事件或?qū)υ氐母淖冎杏|發(fā)；不能主動觸發(fā)，只能被動觸發(fā)。

常用的基本屬性有：Transition-duration(過渡時(shí)間)、Transition-property (過渡 CSS 屬性名稱)、Transition-delay(過渡開始時(shí)間)、貝塞爾曲線、Transition-timing-function(過渡效果時(shí)間曲線)和Transition(簡寫設(shè)置四個(gè)屬性)。

2：瀏覽器兼容

3：Transition-duration

必須搭配transition-property同時(shí)使用，因?yàn)橐付ㄒ粋€(gè)過渡的一個(gè)屬性才能使用；默認(rèn)值是0。

transition-duration: s | ms;

4：Transition-property

必須搭配transition-duration同時(shí)使用；默認(rèn)值是all(所有屬性都獲取過渡效果)；除此之外Transition-duration的值還可以是none(沒有過渡效果)、property(特定屬性獲得過渡效果，多個(gè)屬性用逗號隔開；)。

不是所有的CSS屬性都支持transition-property：all；支持的都有一個(gè)明確的臨界：

background-color、background-positionborder-color、border-width、border-spacingclipcolorcropfont-size、font-weightheight、width、line-heightright、left、bottom、topmargin、paddingmax-height、max-width、min-height、min-widthoutline-color、outline-offset、outline-widthtext-indent、text-shadow、vertical-align、word-spacing、letter-spacingvisibilityopacityz-index

5：Transition-delay(延遲多長時(shí)間才然后才去執(zhí)行轉(zhuǎn)換的過程)

transition-delay: s | ms;

6：貝塞爾曲線

• 應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線
• 繪制貝塞爾曲線
• 函數(shù)形式的貝塞爾曲線

1 一階貝塞爾曲線

2 二階貝塞爾曲線

3 三階貝塞爾曲線

• cubic-bezier(n1, n2, n3, n4)

1 P0 (0, 0)

2 P1 (1, 1)

3 P2 (n1, n2)

4 P3 (n3, n4)

• 曲線上點(diǎn)的切線的斜率對應(yīng)的運(yùn)動速度
• http://cubic-bezier.com/ - 可視化cubic-bezier編輯

7：Transition-timing-function(時(shí)間過渡曲線)

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n1, n2, n3, n4);

• 默認(rèn)ease
• n1、n2、n3、n4取值，官方推薦(0-1)
• linear - 以相同速度過渡 - cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
• ease - 慢速開始 -> 變快 -> 慢速結(jié)束 - cubic-bezier(0.25, 0.1, 0.25, 1)
• ease-in - 慢速開始 - cubic-bezier(0.42, 0, 1, 1)
• ease-out - 慢速結(jié)束 - cubic-bezier(0, 0, 0.58, 1)
• ease-in-out - 慢速開始、慢速結(jié)束、幅度比ease大 - cubic-bezier(0.42, 0, 0.58, 1)
• cubic-bezier(n, n, n, n) - 自定義速度函數(shù) (n介于0和1)

8：局限性與優(yōu)勢

優(yōu)點(diǎn)：簡單易用 ；

局限性：

• transition需要事件觸發(fā)，所以不能在網(wǎng)頁加載是自動發(fā)生；也就是說不能主動觸發(fā)，只能被動觸發(fā)。
• transition是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。
• 只能定義開始和結(jié)束的屬性值，不能定義中間狀態(tài)，也就是說只有兩個(gè)狀態(tài)。

?

本篇文章主要分享了Transition的基本概念，Transition相關(guān)的數(shù)學(xué)基礎(chǔ)，在此基礎(chǔ)上介紹了duration、property、delay、timing-function常用屬性， 以及總結(jié)了Transition的優(yōu)缺點(diǎn)。

總結(jié)

以上是生活随笔為你收集整理的transition css_Transition 过渡的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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