html - 开/关类的不同过渡但相同的属性

Question

我有一个 div，它通过简单的转换将自身转换为:

div{
  transform: translate3d(0, -100%, 0);
  transition: all .5s;
}

div.active{
  transform: translate3d(0, 0, 0);
}

然后，我用 JS 切换类，它完美地工作。这会执行以下操作:

On --> Slide div down
Off --> Slide div up

我想做的是:

On --> Slide div down
Off --> Slide div down again

有什么办法可以实现吗？

编辑:这是它的作用的演示:https://jsfiddle.net/bwzy89oq/ (点击任意位置)

Answer 1

这有点像您需要的，但它开始播放动画。我正在研究如何将其逻辑化:

div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(0, 100%, 0);
  background: black;
  transition: all .5s ease-in-out;
  animation: slider2 .5s forwards;
}

div.active {
  animation: slider .5s forwards;
  /*transform: translate3d(0, 0, 0);*/
}

@keyframes slider {
  from {
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}


@keyframes slider2 {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100%, 0);
  }
}