如果想在 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 过渡-transition 与 动画-animation 的区别复制粘贴太多,都忘了是怎么回事儿了
-
css 多个animation一个接一个依次执行一个animation执行完,接着执行另一个
-
css height 100% 无效解决方法如何让子元素撑满父元素
-
Typed.js打字效果js库的几种应用方式(7)我们可以通过css自定义指针样式,及css动画展示
-
css实现背景颜色半透明的两种方法及区别css实现背景颜色半透明的两种方法及区别
-
追格小站点评主题“H5资讯列表”标题调整为两行或多行的方法追格小站点评主题资讯列表的标题在H5模式下默认为一行,超出隐藏,我们可以通过调整css,将WordPress主题小站点评资讯列表标题调整为两行显示。
暂无评论,抢个沙发...