reactjs - 如何为常见的 Reactstrap 组件添加动画？

Question

我刚开始使用 ReactJS，我的第一个问题是我不知道如何将动画添加到不同的 reactstrap 组件。

例如，我想为 reactstrap 下拉菜单添加 animate.css 进入/离开动画。我怎样才能做到这一点？

谢谢

Answer 1

如果您熟悉编写 CSS 动画，那么这很容易。您将使用与classin 中相同的HTML名称，但将其命名为classNamesinceclass是关键字并且不能在 中使用JSX。

在CSS文件中定义动画后，只需import将其放在 React 应用程序的顶部即可。

...
import ./animate.css
...

class Something extends Component {
...
render(){
return (
...
<MyComponent className={*Same as defined in your CSS file*} />
...

如果一切正确，你的动画应该会出现在你的 react 应用程序中。如果您使用create-react-app启动新项目，那么它已经有一个在CSS文件中定义的徽标动画。这会给你一个不错的开始，然后你可以从那里改变一些东西。

Answer 2

现在只能使用 CSS 方法。感谢您的回答

$base-duration                  : .3s;
$base-distance                  : 10px;
$base-fill-mode                 : both;

.dropdown-menu {
  display: block !important;
  @include animate-prefixer(animation-duration, calc( #{$base-duration} ) );
  @include animate-prefixer(animation-fill-mode, $base-fill-mode);

  @include animate-prefixer(animation-name, fadeOutUpDd);
  top: 100% !important;
  transform: none !important;

  &.show {
    @include animate-prefixer(animation-name, fadeInDownDd);
  }
}

// Fade In

@-webkit-keyframes fadeInDownDd {
  0% {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(-$base-distance * 2);
  }

  100% {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadeInDownDd {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-$base-distance * 2);
  }

  100% {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}

// Fade Out

@-webkit-keyframes fadeOutUpDd {
  0% {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
  }

  100% {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(-$base-distance * 2);
  }
}

@keyframes fadeOutUpDd {
  0% {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-$base-distance * 2);
  }
}