CSS 过渡-transition

存在浏览器兼容问题，需要增加不同浏览器前缀

• -webkit-transition
• -moz-transition
• -o-transition

可使用的过渡效果的属性（主要包括可运算的属性）

• 可动画属性列表
• 不要在auto属性上做动画
• 插入元素(appendChild)或设置display:none/display:block后立即使用过渡,元素将视为没有开始状态，始终处于结束状态，解决办法：使用window.setTimeout,延迟执行

过渡属性

• transition-property
  可过渡的属性，例：width,height,opacity,transform

• transition-duration
  持续时间，例：1s,2s; 若property属性值列表多于duration则duration将重复至长度一致，如1s,2s,1s,2s; 若property属性值列表少于duration则被截断

• transition-delay (延迟时间)

• transition-timing-function (缓动函数，例：ease,ease-in,ease-out,ease-in-out)

• transition (可以设置综合设置)

  -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;

  transition:width 2s, height 2s, background-color 2s, transform 2s;

检测过渡是否完成

• 标准浏览器事件：transitionend;
• webkit事件：webkitTransitionEnd

监听事件：element.addEventListener("transitionend",function,true);

转载于:https://juejin.im/post/5cce9eb651882541c90edb19