Question

目标： 实现动画

应用初始样式
添加一些类，它可以向前播放并保持结果样式
在删除触发器类时，它向后播放并返回初始状态

我得到了什么：

@keyframes translate {
  0% {
    transform: translate3d(-100%,0,0);
  }
  100% {
    transform: translate3d(0,0,0);
  }
}
.element {
  animation-direction: reverse;
  animation-duration: 0.35s;
  animation-fill-mode: both;
  animation-name: translate;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
}
.element.is-animated {
  animation-direction: normal;
}

结果：

除了缺乏流畅的动画外，它的工作原理如上所述（保持样式）。只需立即切换样式。我想有一些规则重叠。

有没有人这样做？我还没有找到针对此特定问题的正确教程

Answer 1

如果要仅在这两个转换属性之间切换。使用转换代替动画。

.element {
    transition:transform .2s ease;
    width:30px;
    height:30px;
    border:1px solid red;
    transform: translate3d(0,0,0);
 }
  .element.is-animated {
    transform: translate3d(-100%,0,0);
  }

正确地说，无论何时希望进行转换，都应该添加删除类动画

如何制作双向CSS3动画

1 个答案: