为什么我这里不执行动画加载完的事件函数
来源：2-6 transition.js
慕丝425684
2020-05-12 21:51:22
var transition=window.mt.transition.end;
console.log(typeof(transition))
function init($elmen,hidecallback){
if ($elmen.is(':hidden')) {
$elmen.data('status','hiden')
hidecallback()
}else{
$elmen.data('status','shown')
};
}
function show($elmen,callback){
if ($elmen.data('status')==='show')return;
if ($elmen.data('status')==='shown')return;
$elmen.data('status','show').trigger('show');
callback()
}
function hide($elmen,callback) {
if ($elmen.data('status')==='hide')return;
if ($elmen.data('status')==='hiden')return;
$elmen.data('status','hide').trigger('hide');
callback()
}
var silent={
init:init,
show:function($elmen){
show($elmen,function(){
$elmen.show();
$elmen.data('status','shown').trigger('shown');
})
},
hide:function($elmen){
hide($elmen,function(){
$elmen.hide();
$elmen.data('status','hiden').trigger('hiden');
})
}
}
var css3={
fade:{
init:function($elmen){
$elmen.addClass('transition')
init($elmen,function() {
$elmen.addClass('fadeout');
})
},
show:function($elmen){
show($elmen,function(){
$elmen.show()
$elmen.off(transition).one(transition,function(event) {
$elmen.data('status','shown').trigger('shown');
});
debugger;
setTimeout(function(){$elmen.removeClass('fadeout')},20);
})
},
hide:function($elmen){
hide($elmen,function(){
$elmen.off(transition).one(transition, function(event) {
$elmen.hide();
$elmen.data('status','hiden').trigger('hiden');
});
$elmen.addClass('fadeout');
})
}
},
slideUpDown:{
show:function(){
},
hide:function(){
}
}
}
var js={}
var $box=$('#box');
css3.fade.init($box);
$('.show').on('click', function(event) {
css3.fade.show($('#box'),function(){
});
});
$box.on('show shown hide hiden', function(event) {
console.log(event.type)
});
$('.hide').on('click', function(event) {
css3.fade.hide($('#box'));
});
1回答
-
好帮手慕慕子
2020-05-13
同学你好，可能是由于动画没有执行，导致无法监听到动画加载完成事件，建议：检查下css和js中的fadeOut单词拼写是否一致。
如果还有问题，可以将你的transition.js、html和css代码全部粘贴过来，便于帮助同学准确的定位与解决问题，祝学习愉快~
0
相似问题