css3 transition学习笔记

简单了解transition

首先字面翻译是过渡的意思，这个属性是css3里的，可以让元素从一种样式变化为另一种样式时候添加效果。比如让元素从白色变成黑色，通常是马上变化，但是通过transition可以让这个改变按照某种速率去变化。

兼容性

目前从Can I Use查到浏览器的兼容性还是可以的。

可动画属性的列表是

可动画属性

需要注意的小问题

在插入元素或者元素从隐藏到显示的时候立即使用过渡，会被认为没有开始状态，因此动画过渡也执行不了。可以通过setTimeOut来解决这个问题。举个小栗子

这样是没有动画效果，直接出来一个200px的div。只需要加个setTimeOut让需要变化的样式处于其中即可。

让display=‘block’放在setTimeOut是没有效果的，个人理解是虽然让他延迟显示，但是让他变宽的已经执行了，因此也是没有。

transition-property(动画指定过渡属性)

用来指定哪些属性需要执行动画过渡效果，默认是all，可以指定width或者其他，，如果你在hover悬浮时改变了背景色、宽度还有高度，但指定了是width的话这样就只有width会执行过渡效果。

transition-duration（过渡时长）

指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。

transition-timing-function

通过指定一个函数去定义属性怎么去变化，常用的有ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)、linear（匀速）

贝塞尔曲线运动，这个可以自定义运动形式，在浏览器f12那里也可以自定义

transition-delay

让过渡效果延迟多久执行
transition-delay: 0.5s

transition复合写法

transition：transition-property，transition-duration，transition-timing-function ，transition-delay ;
transition：1s(动画执行时间),2s（延迟时间）;
transition:width 3s,height 4s,transform 2s,background-color 3.5s ;

检测动画运行完成

这里使用到提供的函数ontransitionend，这个函数会在过渡完成时候触发，提供两个属性：

• propertyName 字符串，指示已完成过渡的属性。
• elapsedTime 指示当触发这个事件时过渡已运行的时间（秒）
  小栗子：

css

 .box{
      width: 100px;
         height: 100px;
         border: 1px solid #000;
         margin-bottom: 10px;
         background: seagreen;
         transition:width 3s,height 4s,transform 2s,background-color 3.5s ;
         transition-timing-function: ease;
   }
 .box:hover{
       width: 250px;
       height: 250px;
       background-color: slateblue;
       transform: rotate(360deg);
   }

html

 <div class="box">

  </div>

js
box.ontransitionend = function(obj){ console.log(obj.propertyName+'已完成用时'+obj.elapsedTime+'s'); }
运行结果：

$如果取消了过渡则不会触发transitionend事件，因为在过渡完成前动画的属性值改变了。$


[1]:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions