老师，绑定了transitionend事件，它是等过渡完成时会自动执行吗，老师我这下面代码有没漏了些什么，好像没动画效果
来源：2-4 用css3实现淡入淡出效果（1）
母鸡阿
2021-01-19 22:38:02
<!DOCTYPE html>
<html>
<head>
<title>淡入淡出1</title>
<script src="../js/jquery.js"></script>
<style type="text/css">
body{
width: 400px;
margin: 50px auto;
}
.btn{width: 50%;float: left;height: 50px;}
.box{height: 200px;width: 100%;background-color: #f00;}
.fadeOut{visibility: hidden;opacity: 0;}
</style>
</head>
<body>
<button class="btn" id="showBox">显示</button>
<button class="btn" id="hideBox">隐藏</button>
<div class="box fadeOut"></div>
<button class="btn">显示2</button>
<script>
var $box = $('.box');
var css3 = {
fade:{
show:function($elem){
$elem.trigger('show');
$elem.on('transitionend',function(){
$elem.trigger('shown');
})
$elem.show();
setTimeout(function(){
$elem.removeClass('fadeOut');
},20)
},
hide:function($elem){
$elem.trigger('hide');
$elem.on('transitionend',function(){
$elem.hide();
$elem.trigger('hidden');
})
$elem.addClass('fadeOut');
}
},
}
$box.on('show shown hide hidden',function(event){
console.log(event.type);
})
$('#showBox').on('click',function(){
css3.fade.show($box);
})
$('#hideBox').on('click',function(){
css3.fade.hide($box);
})
</script>
</body>
</html>
1回答
-
同学你好，是的，transitionend事件等过渡完毕就会执行。
代码中没有过渡效果是因为没有添加过渡属性transition，并且.box默认应该是隐藏的，如下修改：
祝学习愉快~
0
相似问题