我想學前端動畫-CSS之transition
Transition屬性：
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡寫屬性，用於在一個屬性中設定四個過渡屬性。 | 3 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。預設值all。 | 3 |
| transition-duration | 定義過渡效果花費的時間。預設是 0。 | 3 |
| transition-timing-function | 規定過渡效果的時間曲線。預設是 ease。 | 3 |
| transition-delay | 規定過渡效果何時開始。預設是 0 | 3 |
額外提一下兩個屬性：
transition-property
all: 所有屬性， none: 也就是不生效。當然也不是所有的屬性都可以來動效， 具體的參考Certain CSS properties can be animated
不支援的動畫屬性：background-image, float, display, position,visibility。深入理解CSS過渡transition有一個簡單分類的總結，當然相對全面還是Certain CSS properties can be animated
顏色: color background-color border-color outline-color 位置: backround-position left right top bottom 長度: [1]max-height min-height max-width min-width height width [2]border-width margin padding outline-width outline-offset [3]font-size line-height text-indent vertical-align [4]border-spacing letter-spacing word-spacing 數字: opacity visibility z-index font-weight zoom 組合: text-shadow transform box-shadow clip 其他: gradient
transition-timing-function
三階貝塞爾曲線函式， 這裡只要兩個控制點的值。
至於什麼是貝塞爾曲線，可以看看貝塞爾曲線掃盲。
內建了幾個簡單的：1、ease：逐漸變慢, 貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
2、linear：勻速，linear 貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
3、ease-in：加速，ease-in 貝塞爾曲線(0.42, 0, 1.0, 1.0)
4、ease-out：減速，ease-out貝塞爾曲線(0, 0, 0.58, 1.0)
5、ease-in-out：加速然後減，ease-in-out 貝塞爾曲線(0.42, 0, 0.58, 1.0)更多的可以在這裡獲得線上貝塞爾。
這裡的取值還有一種steps函式，可以參考深入理解CSS過渡transition
多值：多種屬性同時變化的時候
依舊是兩個總寫法。 注意transition-property和其他屬性數量不一致的情況。
/* 方法一*/
.demo{
transition-property: width, height;
transition-delay: 500ms;
transition-timing-function: linear;
transition-duration: 2000ms;
}
/* 方法二*/
.demo{
transition: width 2000ms linear 500ms, height 2000ms linear 500ms
}
觸發方式
- 偽類觸發
:hover、:focus、:active等 - 媒體查詢觸發
@media - javascript觸發
Transition事件
- transitioncancel
轉換取消事件 ， 該事件和transitionend互斥，只會有一個發生。 - transitionend
轉換結束事件 - transitionrun
轉換進行事件
- transitionstart
轉換開始事件，因為轉換有delay屬性，所以進行，不一定真正的開始。
const transition = document.querySelector('.transition');
transition.addEventListener('transitioncancel', () => {
console.log('Transition canceled');
});Transition事件的觸發次數是非複合的過渡屬性的個數, 比如width, height同時變換，那麼就是兩次。
還比較有趣的事， 比如hover到某元素的時候，開始變換，沒變換結束，你就離開。
變換效果會倒著來。下面的demo，就會看到。
簡單的Demo
內建貝塞爾函式運動效果
效果有：
- ease
- linear
- easy-in
- easy-out
- easy-in-out
貝塞爾曲線運動-演示地址
進度條
思路
- 兩個div, 一個outer, 一個inner
- box-shadow
- transition
進度條-演示地址
雪花飄飄
思路：
- n個postion為absolute的HTML節點
- transition 隨機貝塞爾曲線和動畫時間
雪花飄飄效果
類似外賣的新增到購物車
思路：
- transition top和left的貝塞爾曲線一個linear一個easy-in達到拋物效果
購物車拋物線效果
CSS Transitions
Using CSS transitions
TransitionEventSection
css-transitions | Can I Use
深入理解CSS過渡transition