transition动画浅析

1.transition是啥

• transition为一个元素在不同状态之间切换的时候，定义不同的过渡效果。

2.如何触发

• 通过添加伪类触发，像是 :hover，:active。需要定义前后两个不同的状态。
• 通过添加普通类名触发，定义前后两个不同的状态。前后不同的状态中，必须有transition属性，下面的例子中，div.addTransition 之所以没有transition属性，是因为其继承了div的transition属性。相反，如果只给div.addTransition添加transition属性，那么div必须添加transition属性。

div {
            width:300px;
            height: 40px;
            background: orange;
            transition: all 2s;
      }
        div.addTransition { /*有来自div的基础上的属性*/
            width: 700px;
        }

• 通过js改变元素某个属性来触发动画。

• 最后，我觉得能不用js搞动画，就不用。因为它操作了DOM。