点击触发 css transition 过渡动画-触发方式小结

css 过渡动画最常用的触发方式就是鼠标移入时触发，大部分案例也都是如此，以致于有些朋友，以为 transition 和 :hover 是配套使用的。

其实，CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

也就是说，只要样式有变化都可以触发过渡动画。

最常见的就是:hover鼠标悬停触发、:active用户单击元素并按住鼠标时触发、:focus获得焦点时触发等。

@media 媒体查询，设置了元素的不同样式，也会触发过渡动画。

还有就是 js 直接改变元素的样式。不过，js改变元素样式，大多浏览器都是直接在元素上设置 style 属性。这也导致了一个问题，一旦通过js控制元素样式，之前 css 文件中定义的样式可能就受影响失效了。

下面是一个延迟3秒后，触发过渡动画的一个例子：

<style>
	#div-trans {
		height: 100px;
		width: 100px;
		background-color: red;
		transition: width 2s linear 0s;
	}
</style>

<div id="div-trans"></div>

jQuery(document).ready(function ($) {
	setTimeout(() => {
		$("#div-trans").width(300);
	}, 3000)
});

点击事件，长按事件等，只要定义好 transition，之后按需修改样式就能触发过渡动画。