老师有几个问题
来源：2-7 css3实现其他显示隐藏效果
宝慕林3013065
2020-07-10 16:27:20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 400px;
margin: 0 auto;
}
button{
width: 50%;
height: 50px;
}
#box{
width: 100%;
height:200px;
background-color: red;
display: none;
}
.transition{
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
.fadeOut{
visibility: hidden;
opacity: 0;
}
.slideUpDownCollapse{
height: 0 !important;
}
.slideLiftRightCollapse{
width: 0 !important;
}
</style>
</head>
<body>
<button class="show">显示</button><button class="hide">隐藏</button>
<div id="box"></div>
<button class="show">显示2</button>
<script src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js"></script>
<script src="transition.js"></script>
<script src="showHide.js"></script>
<script>
$box.on('show shown hide hiden',function(e){
console.log(e);
if(e.type === 'show'){
$box.html('<p>我要显示了</p>');
}else if(e.type === 'shown'){
setTimeout(function(){
$box.html($box.html()+'<p>我已经显示了</p>');
},1000);
}
})
$box.on('show shown hide hiden',function(e){
if(e.type === 'show'){
$box.css('background-color','yellow');
}else if(e.type === 'shown'){
setTimeout(function(){
$box.css('background-color','');
},1000);
}
})
css3.slideLiftRight.init($box);
$('.show').on('click',function(){
css3.slideLiftRight.show($box);
})
$('.hide').on('click',function(){
css3.slideLiftRight.hide($box);
})
</script>
</body>
</html>var $box = $('#box');
var transition = window.mt.transition;
//封装初始化
function init($elem,hiddenCallback){
if($elem.is(':hidden')){
$elem.data('status','hiden');
if(typeof hiddenCallback === 'function') hiddenCallback();
$elem.addClass('fadeOut');
}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') === 'hiden') return;
$elem.data('status','hide').trigger('hide');
callback();
}
var silent = {
init:init,
show:function($elem){
show($elem,function(){
$elem.data('status','shown').trigger('shown');
$elem.show();
})
},
hide:function($elem){
hide($elem,function(){
$elem.hide();
$elem.data('status','hiden').trigger('hiden');
})
}
};
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')
}
},
//从左到右
slideLiftRight:{
init:function($elem){
$elem.width($elem.width());
css3._init($elem,'slideLiftRightCollapse')
},
show:function($elem){
css3._show($elem,'slideLiftRightCollapse')
},
hide:function($elem){
css3._hide($elem,'slideLiftRightCollapse')
}
},
// 淡入淡出+从上到下
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')
}
},
// 淡入淡出+从左到右
fadeSlideLiftRight:{
init:function($elem){
$elem.width($elem.width());
css3._init($elem,'fadeOut slideLiftRightCollapse')
},
show:function($elem){
css3._show($elem,'fadeOut slideLiftRightCollapse')
},
hide:function($elem){
css3._hide($elem,'fadeOut slideLiftRightCollapse')
}
}
};
// 封装css3里的inti
css3._init = function($elem,className){
$elem.addClass('transition');
init($elem,function(){
$elem.addClass(className);
})
};
// 封装css3里的显示
css3._show = function($elem,className){
$elem.off(transition.end).one(transition.end,function(){
$elem.data('status','shown').trigger('shown');
})
$elem.show();
setTimeout(function(){
$elem.removeClass(className);
},20);
};
// 封装css3里的隐藏
css3._hide = function($elem,className){
$elem.off(transition.end).one(transition.end,function(){
$elem.hide();
$elem.data('status','hiden').trigger('hiden');
});
$elem.addClass(className);
};
var js = {
fade:{
show:function(){
},
hide:function(){
}
},
slideUpDown:{
show:function(){
},
hide:function(){
}
},
slideLiftRight:{
show:function(){
},
hide:function(){
}
}
};(function(){
var transitionEndEventName = {
transition:'transitionend',
MozTransition:'transitionend',
WebkitTransition:'webkitTransitionend',
Otransition:'oTransitionend otransitionend',
};
var transitionEnd = ''; //设置一个变量用来接受游览器支持的transition
var isSupport = false; //查看transition是否为真，默认为假
for(var name in transitionEndEventName){
if(document.body.style[name] !== undefined){
transitionEnd = transitionEndEventName[name];
isSupport = true;
break;
}
}
window.mt = window.mt || {};
window.mt.transition = {
end:transitionEnd,
isSupport:isSupport
};
})()1、先从上下开始，点了上下的显示之后底还是透明的，fadeOut效果没有删除，手动把fadeOut删除之后，我已经显示了这段话，每点击一次显示就会出现一次，反而我要显示了没有了
2、左右的问题，body已经设置了宽度是400px，为啥box的宽度设置100%还是会撑满整个屏幕呢？
3、因为有这两个问题在这卡着，淡入淡出+从上到下和淡入淡出+从左到右就没法测试，老师帮忙看下还有其他的错误吗？
写回答
1回答
-
同学你好，问题解答如下：
1.第一个问题在相同的问题回答了，可以查看一下：
http://class.imooc.com/course/qadetail/239205
2.老师这边测试，box没有撑满屏幕，是正常的。建议同学清除浏览器缓存，刷新页面再看一下。
3.老师这边测试没有问题了，可以继续往下做。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题