我对div 的滑动效果有问题。当它有一个类时hddn
覆盖将从视口right: -100%;
。但是当hddn
删除时,它将返回到视口right: 0
.但我需要为这个运动注入活力。我该如何解决这个问题。
<div class="wrapper">
<div class="overlay">
<div class="content">
</div>
</div>
</div>
这里的工作示例
你想这样做吗?
$(document).on("click", function(){
$(".overlay").toggleClass("hddn");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before, *::after {
box-sizing: inherit;
}
.wrapper {
width: 320px;
height: 450px;
background: #eee;
overflow: hidden;
}
.wrapper .overlay {
position: relative;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.wrapper .overlay.hddn {
right: -100%;
transition: right 0.4s ease-in-out;
}
.wrapper .overlay.hddn .content {
right: -100%;
}
.wrapper .content {
width: 80%;
height: 100%;
background: #e7e7e7;
position: absolute;
right: 0;
transition: right 0.4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="overlay hddn">
<div class="content">
I am content
</div>
</div>
</div>