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);
  }
}

开/关类的不同转换但属性相同

1 个答案: