Question

我只是从ReactJS开始，我的第一个问题是我不知道如何向不同的reactstrap组件添加动画。

例如，我想为animatestrap下拉菜单添加animate.css输入/离开动画。我该怎么办？

谢谢

Answer 1

如果您熟悉CSS动画的编写，那么它很容易。您将使用与class中相同的HTML，但是将其命名为className，因为class是一个关键字，不能在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);
  }
}

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

2 个答案: