2017年3月31日 星期五

(css, js)transition開發要注意的

1.
style.transition 與 style.transitionProperty 間的關係

若設置 style.transitionProperty, style.transition 有些瀏覽器會讀不到數據
但若設置  style.transition, style.transitionProperty會讀到數據

2.
設置多個動畫項目及使 duration 相同,但會根據項目數量,啟動多次的 transitionEnd

3.
多個動畫項目對應數目少於其量的 transitionDuration會如何設定

https://lightwave88.blogspot.tw/2017/03/csstransition.html

4.
什麼情況不會啟動 transitionEnd(不會動畫)

#display: none

#duration: 0s (即使設置 delay都不會動畫)

#屬性沒有變動

opacity: 0, visibility: hidden => 都會造成運動

5.
對正在的動畫,如何接續另一個新動畫

a.去除 transition 設定

b.// 重設(style)屬性
element.style.top=getComputedStyle(element).top;


參考

http://easings.net/zh-cn
http://cubic-bezier.com/#.17,.67,.83,.67