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{
			 60px;
			height: 30px;
			background: green;
			color: #fff;
		}
		.box {
			background: yellow;
			 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事件监听 fadeIn fadeOut 两个方法无效（动画结束时无法执行transitionend里面的代码）