请老师帮忙看下为啥没触发shown！
来源：2-5 用css3实现淡入淡出效果（2）
qq_慕九州2374973
2020-01-26 14:37:59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏模块</title>
<link rel="stylesheet" href="css/base.css">
<style>
body{
width: 400px;
margin: 0 auto;
}
.btn{
width: 50%;
height: 25px;
}
#box{
display: none;
width: 400px;
height: 400px;
background-color: #f01414;
font-size: 20px;
line-height: 30px;
}
.transition{
-o-transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
transition: all .5s;
}
.fadeOut{
visibility: hidden;
opacity: 0;
}
</style>
</head>
<body>
<button id="btn-show" class="btn">显示</button><button id="btn-hide" class="btn">隐藏</button>
<div id="box" class="transition fadeOut"></div>
<button class="btn">显示</button>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/showHide.js"></script>
<script type="text/javascript">
var $box = $("#box");
css3.fade.init($box);
$("#btn-show").on("click",function() {
css3.fade.show($box);
});
//A
$box.on("show shown hide hidden",function (e) {
console.log(e.type);
});
$("#btn-hide").on("click",function () {
css3.fade.hide($box);
});
</script>
</body>
</html>
2回答
-
同学你好，代码中transitionend事件名称写错了，所以导致没有检测到动画是否完成来触发shown，参考修改：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
qq_慕九州2374973
提问者
2020-01-26
var silent = {
init:function($elem) {
if($elem.is(":hidden")){// hidden
$elem.data("status","hidden");
}else {//shown
$elem.data("status","shown");
}
},
show:function ($elem) {
if($elem.data("status") === "show"){
return;
}
if($elem.data("status") === "shown"){
return;
}
$elem.data("status","show").trigger("show");
$elem.show();
$elem.data("status","shown").trigger("shown");
},
hide:function ($elem) {
if($elem.data("status") === "hide"){
return;
}
if($elem.data("status") === "hidden"){
return;
}
$elem.data("status","hide").trigger("hide");
$elem.hide();
$elem.data("status","hidden").trigger("hidden");
}
};
var css3 = {
fade:{
init:function($elem) {
if($elem.is(":hidden")){
$elem.data("status","hidden");
}else{
$elem.data("status","shown");
}
},
show:function ($elem) {
if($elem.data("status") === "show"){
return;
}
if($elem.data("status") === "shown"){
return;
}
//绑定事件，触发事件
$elem.data("status","show").trigger("show");
$elem.one("transitioned",function () {
$elem.data("status","shown").trigger("shown");
});
$elem.show();
//触发事件
//display:none 没有过渡动画。此处先将元素显示，然后使用setTimeout异步实现
setTimeout(function(){
$elem.removeClass("fadeOut");
},100);
},
hide:function ($elem) {
if($elem.data("status") === "hide"){
return;
}
if($elem.data("status") === "hidden"){
return;
}
//在隐藏之前设置状态，触发事件
$elem.data("status","hide").trigger("hide");
$elem.one("transitionend",function () {
$elem.hide();
//真正隐藏之后也要设置状态，
$elem.data("status","hidden").trigger("hidden");
});
$elem.addClass("fadeOut");
}
},
slideUpDown:{
show:function () {
},
hide:function () {
}
},
slideLeftRight:{
show:function () {
},
hide:function () {
}
},
fadeSlideUpDown:{
show:function () {
},
hide:function () {
}
},
fadeSlideLeftRight:{
show:function () {
},
hide:function () {
}
},
};0
相似问题