前言

在之前的笔记 CSS – W3Schools 学习笔记 (3) 就有讲过 CSS Transitions.

它是用来做 animation 的. 这篇补上使用时的一些细节.

 

什么时候放 ?

有个 div width 100px

<div class="target">target</div>

.target {
  border: 2px solid red;
  width: 100px;
}

hover 的时候 width change to 300px

.target:hover {
  width: 300px;
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

当 hover 的时候, 修改 width, 同时给予它 transition 逻辑.

 

把 transition 逻辑放到 hover 是可以的, 但是注意结尾的时候, 到 mouse leave 的时候 width 恢复到 100px 同时 transition 也移除了, 所以退回的动作没有 animation. 

从这个例子可以看出来 Transition 的 work flow, 当 element 有 transition 属性时, 修改 CSS 就会有 animation. 如果没有就不会出现 animation. 

所以呢, 比较常见的做法是一开始就给元素 transition 属性. 后续就操作其它 CSS 属性就可以了. 

如果是要复杂一些的 animation, 比如有 2 step 的, 动态多一点的, 那么建议之间用 JS 的 animation 更直观. 

 

JS Listen to Transition Event

transitionrun, transitionstart, transitioncancel, transitionend

run 是一开始就跑的, 比 start 还早. 

cancel 是当 animation 没有结束, 但是属性被又修改了.

参考: HTMLElement: transitionend event