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。