Question

我使用ReactModal为动画提供CSS类（例如下面的代码）：

.ReactModal__Content {
  opacity: 0;
}

.ReactModal__Content--after-open {
  opacity: 1;
  transition: opacity 150ms;
}

.ReactModal__Content--before-close {
  opacity: 0;
}

我试图让模态进出动画。动画是在工作，但不是动画反向我想要发生在关闭...我在下面的动画属性做错了什么？

  .ReactModal__Content {
    animation-duration: 1s;
    animation-name: fadeInUpBigXXX;

  }

  .ReactModal__Content--after-open {
    animation-direction: normal;


  }
  .ReactModal__Content--before-close {
    animation-direction: reverse;
  }

  @keyframes fadeInUpBigXXX {
    from {
      opacity: 0;
      transform: translate3d(0, 2000px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

模态很好地制作动画。但是onClose，模态没有执行反向fadeInUpBigXXX动画。为什么呢？

Answer 1

默认情况下，您的动画只会运行一次。所以一旦它第一次完成，它就完成了。您可以做的一件事是更改前关闭类中的 animation-iteration-count 。像这样举例如：

.reverse {
  animation-direction: reverse;
  animation-iteration-count: 2;
  transform: translate3d(0, 500px, 0);
  opacity: 0;
}

.normal {
  animation-direction: normal;
}

#test {
  background-color: blue;
  width: 100px;
  height: 100px;
  animation-duration: 4s;
  animation-name: fadeInUpBigXXX;
}

@keyframes fadeInUpBigXXX {
  from {
    opacity: 0;
    transform: translate3d(0, 500px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

https://jsfiddle.net/bjkbakg4/23/

为什么这个CSS动画渲染正向但不反向？

1 个答案: