如果想在 css 的动画结束后，立刻执行其他操作，只需要监听过渡动画结束事件即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监听过渡动画结束事件</title>
<style>
#div-trans {
height: 100px;
width: 100px;
background-color: red;
transition: width 2s linear 0s;
}
#div-trans:hover {
width: 250px;
}
</style>
</head>
<body>
<div id="div-trans"></div>
</body>
<script>
let trans = document.getElementById("div-trans")
trans.addEventListener("transitionend", function () {
console.log('过渡动画结束，现在的宽度是：' + trans.scrollWidth);
});
</script>
</html>需要注意的是，需要在回调函数内判断元素最后的状态是初始状态还是最终状态，然后再决定执行什么样的操作。
比如上面那个例子，用户鼠标移上后，未等过渡动画执行完，就把鼠标移走，动画就会反向执行，最后的状态依然是初始状态。
-
css详解系列：10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目（子元素）在容器中出现的順序。
-
css详解系列：11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果，看看如何实现的。
-
css样式表的三种样式css（级联样式表）主要有三种样式定义方式
-
如何在css中实现样式优先级在css中，样式优先级是由一系列规则决定的，这些规则决定了当多个样式规则应用于同一个HTML元素时，哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中，如果你想让超出特定长度的文本显示为三个点（...），你可以使用text-overflow属性，配合overflow和white-space属性。
暂无评论，抢个沙发...