html - 如何在向后添加过渡效果

Question

我对 div 的滑动效果有疑问。当它有一个 hddn 类时，覆盖将从视口(viewport)获得 right: -100%;。但是当 hddn 移除时，它将返回到视口(viewport) right: 0。但我需要为这个运动制作动画。我该如何解决这个问题。

<div class="wrapper">
    <div class="overlay">
         <div class="content">
         </div>
    </div>
</div>

工作示例 here

Answer 1

你想这样做吗？

$(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>