0

I'm just starting with ReactJS and one of my first problems is that I don't know how I can add animations to different reactstrap components.

For example, I would like to add animate.css enter/leave animations for reactstrap dropdowns. How can I do that?

Thanks

Horia Simon
  • 1
  • 2
  • Hi and welcome to SO :). Have you already tried something? If yes, can you show us your attempt, please? Thanks! – CodeF0x Oct 22 '18 at 10:01

2 Answers2

0

If you're familiar with writing CSS animations, then its quite easy. You would use the same class as you would in HTML, but instead name it as className since class is a keyword and cannot be used in JSX.

After defining your animations in CSS file, simply import it at the top of your React app.

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

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

And if everything is correct, your animations should show up in your react app. If you use create-react-app to start your new project, then it already has a logo animation which is defined in the CSS file. That will give you a decent start, and then you can change stuff from there.

Umair Ahmed
  • 506
  • 3
  • 10
0

CSS only method will have to do for now. Thanks for the answers

$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);
  }
}
Horia Simon
  • 1
  • 2