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

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

0 голосов
/ 22 октября 2018

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

Например, я хотел бы добавить animate.cssвводить / оставлять анимации для выпадающих списков.Как я могу это сделать?

Спасибо

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

Только 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);
  }
}
0 голосов
/ 22 октября 2018

Если вы знакомы с написанием 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.Это даст вам достойное начало, и тогда вы сможете все изменить.

...