transitionend事件监听 fadeIn fadeOut 两个方法无效（动画结束时无法执行transitionend里面的代码）...

最新推荐文章于 2022-04-06 15:24:00 发布

weixin_30399871

最新推荐文章于 2022-04-06 15:24:00 发布

阅读量425

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Knowledge-is-infinite/p/11379399.html

版权

//下面的例子证明 fadeIn() fadeOut() 不能使用transitionend事件进行监听。
//说白了在fadeIn fadeOut 后面监听动画结束时，transitionend是不会执行的。


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.btn{
			width: 60px;
			height: 30px;
			background: green;
			color: #fff;
		}
		.box {
			background: yellow;
			width: 300px;
			height: 300px;
			margin: 100px auto;
		}
	</style>
</head>
<body>
	<button class="btn">点击</button>
	<div class="box"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script>
		var $btn = $('.btn'),
			$box = $('.box');

		//下面的例子证明 fadeIn()  fadeOut() 不能使用transitionend事件进行监听。
		//说白了在fadeIn fadeOut 后面监听动画结束时，transitionend是不会执行的。
		$btn.on('click',function(){
			$box.fadeOut();
			$box.on('transitionend',function(){
				console.log(11);
			})
		})
		/*$btn.on('click',function(){
			$box.css({
				background:'red',
				transition:'all 2s'
			})
			$box.on('transitionend',function(){
				console.log(11);
			})
		})*/
		
	</script>
</body>
</html>

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/11379399.html