使用react-transition-group完成过场动画

what - react-transition-group

react-transition-group 是一个用于控制动画过程的库（它是 react 官方团队维护的），它能让你更加方便地管你你动画的流程！

react-transition-group

本文这里不过多介绍具体的 API 内容，如果想要学习 API 这部分的内容，推荐阅读官方文档

组件级别的过场动画

这里定了两个动画样式

.transition-group {
  // 翻页动画
  // 下一页
  &-forward-enter {
    opacity: 0;
    transform: translateX(100%);
  }
  &-forward-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 1s ease-in;
  }
  &-forward-exit {
    opacity: 1;
    transform: translateX(0);
  }
  &-forward-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1s ease-in;
  }
  // 上一页
  &-back-enter {
    opacity: 0;
    transform: translateX(-100%);
  }
  &-back-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 1s ease-in;
  }
  &-back-exit {
    &:extend(.main);
    opacity: 1;
    transform: translateX(0);
  }
  &-back-exit-active {
    &:extend(.main);
    opacity: 0;
    transform: translate(100%);
    transition: all 1s ease-in;
  }

  // 渐入渐出动画
  &-opacity-enter {
    opacity: 0;
  }
  &-opacity-enter-active {
    opacity: 1;
    transition: all 2s ease-in;
  }
  &-opacity-exit {
    &:extend(.main);
    opacity: 1;
  }
  &-opacity-exit-active {
    &:extend(.main);
    opacity: 0;
    transition: all 2s ease-in;
  }
}

dmeo-1_常用过渡动画

渐入渐出效果：

翻页效果：