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

Posted knowledge-is-infinite

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了transitionend事件 监听 fadeIn fadeOut 两个方法无效（动画结束时无法执行transitionend里面的代码）相关的知识，希望对你有一定的参考价值。

//下面的例子证明 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>

　　

以上是关于transitionend事件 监听 fadeIn fadeOut 两个方法无效（动画结束时无法执行transitionend里面的代码）的主要内容，如果未能解决你的问题，请参考以下文章

一个总是触发的“transitionend”事件，并且只触发一次

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

在没有隐藏溢出的情况下，transitionend 事件在 FireFox 中没有持续触发

在 Linux 下的 Firefox 15.0.1 中未触发 transitionend 事件

transitionend的运用案例

transitionend的运用案例