为什么控制台不输出hide、hidden、show、shown？
跟着视频敲代码，我的程序能够实现淡入淡出、上下滑动、左右滑动的效果。但是为什么在谷歌浏览器中，控制台不输出hide、hidden、show、shown？而在IE浏览器中，控制台才输出hide、hidden、show、shown？
这是在Chrome中运行的效果。
我的谷歌浏览器是最新版本，V84.0
这是在IE中运行的效果。
版本是IE11
我的程序目录如下：
2-7.html如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>2-7-显示和隐藏</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<base target="_blank">
<link type="text/css" rel="stylesheet" href="../reset.css">
<style type="text/css">
button
{
margin: 20px;
width: 100px;
height: 30px;
}
#box
{
position: absolute;
left: 80px;
top: 80px;
width: 400px;
height: 200px;
background-color: red;
}
/* 动画时间 */
.transition
{
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
/*淡出效果*/
.fadeOut
{
opacity: 0 !important;
visibility: hidden !important;
}
/* 上下滑动隐藏 */
.slideUpDownCollapse
{
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* 左右滑动隐藏 */
.slideLeftRightCollapse
{
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
</style>
</head>
<body>
<button id="showBtn">show</button>
<button id="hideBtn">hide</button>
<div id="box"></div>
<script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="transition.js"></script>
<script type="text/javascript" src="showHide.js"></script>
<script type="text/javascript">
console.log(window.MUTAO.transitionend);
console.log(window.MUTAO.isSupported);
let $box = $("#box"),
$showBtn = $("#showBtn"),
$hideBtn = $("#hideBtn");
// 绑定自定义的4个事件：show、shown、hide、hidden
$box.on("show shown hide hidden", function(event)
{
console.log(event.type);
});
/*
silentAnimation.init($box);
$showBtn.on("click", function()
{
silentAnimation.show($box);
});
$hideBtn.on("click", function()
{
silentAnimation.hide($box);
});
*/
/*
cssAnimation.fade.init($box);
$showBtn.on("click", function()
{
cssAnimation.fade.show($box);
});
$hideBtn.on("click", function()
{
cssAnimation.fade.hide($box);
});
*/
/*
cssAnimation.slideUpDown.init($box);
$showBtn.on("click", function()
{
cssAnimation.slideUpDown.show($box);
});
$hideBtn.on("click", function()
{
cssAnimation.slideUpDown.hide($box);
});
*/
/*
cssAnimation.slideLeftRight.init($box);
$showBtn.on("click", function()
{
cssAnimation.slideLeftRight.show($box);
});
$hideBtn.on("click", function()
{
cssAnimation.slideLeftRight.hide($box);
});
*/
/*
cssAnimation.fadeSlideUpDown.init($box);
$showBtn.on("click", function()
{
cssAnimation.fadeSlideUpDown.show($box);
});
$hideBtn.on("click", function()
{
cssAnimation.fadeSlideUpDown.hide($box);
});
*/
cssAnimation.fadeSlideLeftRight.init($box);
$showBtn.on("click", function()
{
cssAnimation.fadeSlideLeftRight.show($box);
});
$hideBtn.on("click", function()
{
cssAnimation.fadeSlideLeftRight.hide($box);
});
</script>
</body>
</html>transition.js如下：
/**
* 解决transitionend事件的兼容性问题
* **/
// console.log(document.body.style.transition);
(function()
{
// transitionend事件名
let transitionendEvent =
{
transition: "transitionend",
MozTransition: "transitionend",
WebkitTransition: "webkitTransitionEnd",
OTransition: "oTransitionEnd otransitionend",
};
let transitionend = "",
isSupported = false;
for (let i in transitionendEvent)
{
if (document.body.style[i] !== undefined)
{
transitionend = transitionendEvent[i];
isSupported = true;
break;
}
}
// 全局变量MUTAO
window.MUTAO = window.MUTAO || {};
window.MUTAO =
{
transitionend: transitionend,
isSupported: isSupported,
};
})();showHide.js如下：
let silentAnimation =
{
// 初始化
init: init,
// 显示
show: function($ele)
{
show($ele, function()
{
// 调用jQuery的show方法
$ele.show();
// 触发自定义的shown事件，设置状态为shown
$ele.trigger("shown").data("status", "shown");
});
},
// 隐藏
hide: function($ele)
{
hide($ele, function()
{
// 调用jQuery的hide方法
$ele.hide();
// 触发自定义的hidden事件，设置状态为hidden
$ele.trigger("hidden").data("status", "hidden");
});
},
};
let cssAnimation =
{
_init: function($ele, classname)
{
$ele.addClass("transition");
init($ele, function()
{
$ele.addClass(classname);
});
},
_show: function($ele, classname)
{
show($ele, function()
{
// 动画结束后，触发自定义的shown事件，设置状态为shown
$ele.off(window.MUTAO.transitionend).one(window.MUTAO.transitionend, function()
{
$ele.trigger("shown").data("status", "shown");
});
// 先显示
$ele.show();
// 后动画过渡
setTimeout(function()
{
$ele.removeClass(classname);
});
});
},
_hide: function($ele, classname)
{
hide($ele, function()
{
// 然后在动画结束后，隐藏
$ele.off(window.MUTAO.transitionend).one(window.MUTAO.transitionend, function()
{
$ele.hide();
// 触发自定义的hidden事件，设置状态为hidden
$ele.trigger("hidden").data("status", "hidden");
});
// 先动画过渡
$ele.addClass(classname);
});
},
// 淡入淡出效果
fade:
{
// 初始化
init: function($ele)
{
cssAnimation._init($ele, "fadeOut");
},
// 淡入
show: function($ele)
{
cssAnimation._show($ele, "fadeOut");
},
// 淡出
hide: function($ele)
{
cssAnimation._hide($ele, "fadeOut");
},
},
// 上下滑动效果
slideUpDown:
{
// 初始化
init: function($ele)
{
// 设置高度
$ele.height($ele.height());
cssAnimation._init($ele, "slideUpDownCollapse");
},
// 上下滑动显示
show: function($ele)
{
cssAnimation._show($ele, "slideUpDownCollapse");
},
// 上下滑动隐藏
hide: function($ele)
{
cssAnimation._hide($ele, "slideUpDownCollapse");
},
},
// 左右滑动效果
slideLeftRight:
{
// 初始化
init: function($ele)
{
// 设置宽度
$ele.width($ele.width());
cssAnimation._init($ele, "slideLeftRightCollapse");
},
// 左右滑动显示
show: function($ele)
{
cssAnimation._show($ele, "slideLeftRightCollapse");
},
// 左右滑动隐藏
hide: function($ele)
{
cssAnimation._hide($ele, "slideLeftRightCollapse");
},
},
// 淡入淡出+上下滑动效果
fadeSlideUpDown:
{
// 初始化
init: function($ele)
{
// 设置高度
$ele.height($ele.height());
cssAnimation._init($ele, "fadeOut slideUpDownCollapse");
},
// 上下滑动显示
show: function($ele)
{
cssAnimation._show($ele, "fadeOut slideUpDownCollapse");
},
// 上下滑动隐藏
hide: function($ele)
{
cssAnimation._hide($ele, "fadeOut slideUpDownCollapse");
},
},
// 淡入淡出+左右滑动效果
fadeSlideLeftRight:
{
// 初始化
init: function($ele)
{
// 设置宽度
$ele.width($ele.width());
cssAnimation._init($ele, "fadeOut slideLeftRightCollapse");
},
// 左右滑动显示
show: function($ele)
{
cssAnimation._show($ele, "fadeOut slideLeftRightCollapse");
},
// 左右滑动隐藏
hide: function($ele)
{
cssAnimation._hide($ele, "fadeOut slideLeftRightCollapse");
},
},
};
let jsAnimation = {};
function init($ele, hiddenCallback)
{
if ($ele.is(":hidden") || $ele.css("visibility") === "hidden")
{
$ele.data("status", "hidden");
typeof hiddenCallback === "function" ? hiddenCallback() : 1;
}
else
{
$ele.data("status", "shown");
}
}
function show($ele, callback)
{
// 若已显示，则返回
if ($ele.data("status") === "show" || $ele.data("status") === "shown")
{
return;
}
// 触发自定义的show事件，设置状态为show
$ele.trigger("show").data("status", "show");
callback();
}
function hide($ele, callback)
{
// 若已隐藏，则返回
if ($ele.data("status") === "hide" || $ele.data("status") === "hidden")
{
return;
}
// 触发自定义的hide事件，设置状态为hide
$ele.trigger("hide").data("status", "hide");
callback();
}reset.css如下：
/*
重置样式
*/
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
a, address, big, cite, code,
em, img, ins, samp,
b, u, i, small, strike, strong, sub, sup, tt,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, thead, tbody, tfoot, tr, th, td,
article, aside, details,
figure, figcaption, footer, header, hgroup,
menu, nav, output, section, summary,
time, mark, audio, video
{
margin: 0;
padding: 0;
}
body
{
font-family: "微软雅黑 Microsoft YaHei";
font-size: 16px;
color: #000;
background-color: #FFF;
}
li
{
list-style-type: none;
}
a
{
text-decoration-line: none;
}15
收起
正在回答 回答被采纳积分+1
1回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星