老师，为什么我用js控制左右展开时，首次没有左右展开的效果

来源：2-9 用js实现其他显示隐藏效果

慕用7018409

2020-07-12 09:53:19

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.btnall{
width:604px;
height:100px;
margin:0 auto;}
.btn{
width:300px;
height:100px;
float:left;
background-color:green;
border:1px solid black;
}
#box{
width:602px;
height:300px;
background-color:red;
position:relative;
left:50%;
margin-left:-301px;
display:none;
}
.transition{
transition:all 1s;
}
.fadeout{
visibility:hidden;
opacity:0;
}
.slideUpDown{
height:0 !important;}
</style>
<body>
<div class="btnall">
<button class="btn" id="btn1"></button>
<button class="btn" id="btn2"></button>
</div>
<div class="" id="box"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script>
//发布订阅
function init(e,hiddenback){
  if(e.is(':hidden')){
   e.data('status','hidden');
   if(typeof hiddenback==='function'){hiddenback();}

  }else{
   e.data('status','shown');

  }
}

function show(e,callback){
  if(e.data('status')==='show')return;
  if(e.data('status')==='shown')return;


  e.data('status','show').trigger('show');
  callback();
}

function hide(e,callback){
  if(e.data('status')==='hide')return;
  if(e.data('status')==='hidden')return;

  e.data('status','hide').trigger('hide');
  callback();
}
var silent={
   init:function(){},
   show:function(e){
    show(e,function(){
     e.show();
     e.data('status','shown').trigger('shown');
    })
   },
   hide:function(e){

    hide(e,function(){
     e.hide();
     e.data('status','hidden').trigger('hidden');
    })

   }

};

var css3={
   fade:{
    init:function(e){
     css3._init(e,'fadeout');
    },
    show:function(e){
      css3._show(e,'fadeout');
    },
    hide:function(e){
      css3._hide(e,'fadeout');
    }
   },
   slideUpDown:{
    init:function(e){
     css3._init(e,'slideUpDown');
    },
    show:function(e){
     css3._show(e,'slideUpDown');
   },
    hide:function(e){
     css3._hide(e,'slideUpDown');
   }
   },
   slideLeftRight:{
    show:function(){

    },
    hide:function(){

    }
   },
   fadeSlideUpDown:{
    show:function(){

    },
    hide:function(){

    }
   },
   fadeSlideLeftRight:{
    show:function(){

    },
    hide:function(){

    }
   }
};
css3._init=function(e,className){
  e.addClass('transition');
  init(e,function(){
   e.addClass(className);
  });
};

css3._show=function(e,className){
  show(e,function(){
  e.off('transitionend').one('transitionend',function(){
    e.data('status','shown').trigger('shown');
   })
   e.show();
   setTimeout(function(){
    e.removeClass(className);},30);
  });
  };
css3._hide=function(e,className){
  hide(e,function(){
  e.off('transitionend').one('transitionend',function(){

   e.data('status','hidden').trigger('hidden');
   e.hide();
  })

  setTimeout(function(){
   e.addClass(className);},30);

});
};
var js={
   fade:{
    init:function(e){
     js._init(e);
    },
    show:function(e){
     js._show(e,'fadeIn')

    },
    hide:function(e){
     js._hide(e,'fadeOut')
   }
   },
   slideUpDown:{
    init:function(e){
     js._init(e);
    },
    show:function(e){
     js._show(e,'slideDown');
    },
   hide:function(e){
    js._hide(e,'slideUp');
    }
   },
   slideLeftRight:{
    init:function(e){
    js._LRinit(e,{
     'width':0,
     'padding-left':0,
     'padding-right':0
    });

    },
    show:function(e){
     js._LRshow(e);
    },
   hide:function(e){
     hide(e,function(){
       e.animate({
        'width':0,
        'padding-left':0,
        'padding-right':0
       },function(){
        e.data('status','hidden').trigger('hidden');
        e.hide();
       });
      });
     }

   }
}
js._init=function(e,hiddenCallback){
  e.removeClass('transition');
  init(e);
};
js._show=function(e,mode){
  show(e,function(){
   e.stop()[mode](function(){
    e.data('status','shown').trigger('shown');
   });
  });
}
js._hide=function(e,mode){
  hide(e,function(){
   e.stop()[mode](function(){
    e.data('status','hidden').trigger('hidden');
   });
  });
}
js._LRinit=function(e,options){
  var styles={};

  for(var p in options){
   styles[p]=e.css(p);
  }

  e.data['styles']=styles;

   init(e,function(){
    e.removeClass('transition');
    js._init(e,function(){
     e.css(options);
    });


   });
}
js._LRshow=function(e){
  show(e,function(){
   var styles=e.data['styles'];

   e.show();

    e.stop().animate(styles,function(){
     e.data('status','shown').trigger('shown');
    });
  });
  }
var box=$('#box');
js.slideLeftRight.init(box);

$('#btn1').on('click',function(){
  js.slideLeftRight.show(box);
});
$('#btn2').on('click',function(){
  js.slideLeftRight.hide(box);
});

box.on('show shown',function(e){
  console.log(e.type);

})
box.on('hide hidden',function(e){
  console.log(e.type);

})
</script>
</body>
</html>