我想學前端動畫-CSS之transition

時間 2019-11-07

標籤我想前端動畫 css transition 欄目 CSS 简体版

原文原文鏈接

Transition屬性：

屬性	描述	CSS
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。	3
transition-property	規定應用過渡的 CSS 屬性的名稱。默認值all。	3
transition-duration	定義過渡效果花費的時間。默認是 0。	3
transition-timing-function	規定過渡效果的時間曲線。默認是 ease。	3
transition-delay	規定過渡效果什麼時候開始。默認是 0	3

額外提一下兩個屬性：javascript

transition-property
all: 全部屬性， none: 也就是不生效。
固然也不是全部的屬性均可以來動效，具體的參考Certain CSS properties can be animated
不支持的動畫屬性：background-image, float, display, position,visibility。css

深刻理解CSS過渡transition有一個簡單分類的總結，固然相對全面仍是Certain CSS properties can be animatedhtml

顏色: 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
三階貝塞爾曲線函數，這裏只要兩個控制點的值。
至於什麼是貝塞爾曲線，能夠看看貝塞爾曲線掃盲。
內置了幾個簡單的：java

一、ease：逐漸變慢, 貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
二、linear：勻速，linear 貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
三、ease-in：加速，ease-in 貝塞爾曲線(0.42, 0, 1.0, 1.0)
四、ease-out：減速，ease-out貝塞爾曲線(0, 0, 0.58, 1.0)
五、ease-in-out：加速而後減，ease-in-out 貝塞爾曲線(0.42, 0, 0.58, 1.0)git

更多的能夠在這裏得到在線貝塞爾。
github

這裏的取值還有一種steps函數，能夠參考深刻理解CSS過渡transition函數

多值：多種屬性同時變化的時候

依舊是兩個總寫法。 注意transition-property和其餘屬性數量不一致的狀況。post

/* 方法一*/
.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，就會看到。動畫