为什么这个CSS动画是向前渲染而不是反向渲染



我正在使用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);
    }
  }

模态的动画效果很好。但是在关闭时,模态不会执行反向淡入淡出的UpBigXXX动画。为什么?

默认情况下

,您的动画将只运行一次。所以一旦它第一次完成,它就完成了。您可以做的一件事是更改关闭前类中的动画迭代计数。例如,像这样:

.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/

相关内容

  • 没有找到相关文章

最新更新