为什么定义一个变量来储存获取到的transitionend后 不能触发shown或者hidden事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏模块</title>
<style>
body {
width: 400px;
margin: 0 auto;
}
.btn {
width: 50%;
height: 30px;
}
#box {
width: 400px;
height: 100%;
background-color: red;
display: none;
overflow:hidden;
}
.transition {
-o-transition: all 1s;
-ms-transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.fadeout {
visibility: hidden;
opacity: 0;
}
.slideUpDownCollapse{
height:0 !important;
}
.slideLeftRightCollapse{
width:0 !important;
}
</style>
</head>
<body>
<button id="btn-show" class="btn">显示</button><button id="btn-hide" class="btn">隐藏</button>
<div id="box" class="">
<p>222</p>
<p>222</p>
<p>222</p>
</div>
<button class="btn">显示2</button>
<script src="../jquery-3.4.1.min.js"></script>
<script src="./js/transition.js"></script>
<script>
var transition = window.mt.transition.end;
function init($elem, hiddenCallback) {
if ($elem.is(':hidden')) {
$elem.data('status', 'hidden')
if (typeof hiddenCallback == 'function') hiddenCallback();
} else {
$elem.data('status', 'shown')
}
}
function show($elem, callback) {
if ($elem.data('status') === 'show') return;
if ($elem.data('status') === 'shown') return;
$elem.data('status', 'show').trigger('show');
callback();
}
function hide($elem, callback) {
if ($elem.data('status') === 'hide') return;
if ($elem.data('status') === 'hidden') return;
$elem.data('status', 'hide').trigger('hide');
callback();
}
var $box = $('#box');
var silent = {
init: init,
show: function ($elem) {
show($elem, function () {
$elem.show();
$elem.data('status', 'shown').trigger('shown')
})
},
hide: function ($elem) {
hide($elem, function () {
$elem.hide();
$elem.data('status', 'hidden').trigger('hidden');
})
}
}
var css3 = {
fade: {
init: function ($elem) {
css3._init($elem,'fadeout')
},
show: function ($elem) {
css3._show($elem,'fadeout')
},
hide: function ($elem) {
css3._hide($elem,'fadeout')
}
},
slideUpDown:{
init: function ($elem) {
$elem.height($elem.height());
css3._init($elem,'slideUpDownCollapse')
},
show: function ($elem) {
css3._show($elem,'slideUpDownCollapse')
},
hide: function ($elem) {
css3._hide($elem,'slideUpDownCollapse')
}
},
slideLeftRight:{
init:function($elem){
$elem.width($elem.width());
css3._init($elem,'fadeout slideLeftRightCollapse')
},
show:function($elem){
css3._show($elem,'fadeout slideLeftRightCollapse')
},
hide:function($elem){
css3._hide($elem,'fadeout slideLeftRightCollapse')
}
},
fadeslideUpDown:{
init:function($elem){
$elem.height($elem.height());
css3._init($elem,'fadeout slideUpDownCollapse');
},
show:function($elem){
css3._show($elem,'fadeout slideUpDownCollapse');
},
hide:function($elem){
css3._hide($elem,'fadeout slideUpDownCollapse')
}
},
fadeslideLeftRight:{
init:function($elem){
$elem.width($elem.width());
css3._init($elem,'fadeout slideLeftRightCollapse');
},
show:function($elem){
css3l._show($elem,'fadeout slideLeftRightCollapse');
},
hide:function($elem){
css3._hide($elem,'fadeout slideLeftRightCollapse');
}
}
}
css3._init = function($elem,classname){
$elem.addClass('transition');
init($elem, function () {
$elem.addClass(classname)
})
}
css3._show = function($elem,classname){
show($elem, function () {
$elem.off('webkitTransitionEnd').one('webkitTransitionEnd', function () {
$elem.data('status', 'shown').trigger('shown');
})
$elem.show();
setTimeout(function () {
$elem.removeClass(classname);
},200)
})
}
css3._hide = function($elem,classname){
hide($elem, function () {
$elem.off('webkitTransitionEnd').one('webkitTransitionEnd', function () {
$elem.hide();
$elem.data('status', 'hidden').trigger('hidden');
})
$elem.addClass(classname);
})
}
var js = {
fade:{
init:function($elem){
},
show:function($elem){
show($elem,function(){
$elem.fadeIn();
$elem.data('status', 'shown').trigger('shown');
})
},
hide:function($elem){
hide($elem,function(){
$elem.fadeOut();
$elem.data('status','hidden').trigger('hidden');
})
}
}
}
css3.fade.init($box);
$('#btn-show').on('click', function () {
css3.fade.show($box);
})
$('#btn-hide').on('click', function () {
css3.fade.hide($box);
})
$box.on('show shown hide hidden', function (e) {
if (e.type == "show") {
console.log('触发show')
} else if (e.type == "shown") {
console.log('触发shown')
} else if (e.type == 'hide') {
console.log('触发hide')
} else if (e.type == 'hidden') {
console.log('触发hidden')
}
})
</script>
</body>
</html>
正在回答
同学你好，如下，是这样替换的吗？
这是因为transition是个变量，不需要添加引号，去掉即可，例：
另，建议：同学以后提问这样的问题的时候，可以详细的描述下那块进行了替换，也可以提供替换的代码，像如下这样，标注好哪里进行了替换。便于更加准确的定位与解决问题。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星