如何向后添加过渡效果

Question

我对div的滑动效果有问题。当它有一个类hddn时，叠加层将从视口中获取right: -100%;。但删除hddn后，它将返回到视口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>