Как добавить анимацию для обычных компонентов Reactstrap?

Question

Я только начинаю с ReactJS, и одна из моих первых проблем заключается в том, что я не знаю, как я могу добавить анимацию к различным компонентам реагирующей ленты.

Например, я хотел бы добавить анимацию ввода / вывода 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*} />
...

И если все правильно, ваша анимация должна отображаться в вашем приложении реакции. Если вы используете create-react-app чтобы начать новый проект, он уже имеет анимацию логотипа, которая определяется в CSS файл. Это даст вам достойное начало, и тогда вы сможете все изменить.

Answer 2

На самом деле, есть много способов добавить анимацию. 1. Во-первых, вы можете использовать CSS для достижения эффекта анимации, например, добавить файл styles.css

import "./styles.css"
...
render () {
  return (
     <div>
        <ButtonDropdown className="...">
        </ButtonDropdown>
     </div>
   )
}

2. Другой способ - использовать jsx в файле js, например

render (){
      const styles= {
        dropdown: {
          ...
        }
       }
    return (
       <div>
         <ButtonDropdown style={styles.dropdown}>
         </ButtonDropdown>
       </div>
      )
    }

3. Если у вас есть много места для использования анимации, вы можете попробовать стороннюю библиотеку об анимации, такую ​​как React Motion,Animated и т. Д. Если вы просто хотите использовать анимацию в нескольких местах, вам не нужно использовать этот метод, просто используйте два метода (js,css) выше.

Answer 3

Только 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);
  }
}