Использование AnimateCSS в компоненте ReactJs

Я установил Animate.CSS npm install animate.css --save и сохранил его в ./node_modules локальных пакетах.

Когда я читал документацию Animate.CSS в Github, в ней говорилось, что просто добавьте имя класса, такое как fadeInDown, bouceInDown...etc, в элемент, который я хотел сделать анимацией, но я не понимаю, требуется ли имя класса из локальных пакетов.

Вопрос. Как мы можем запросить имя класса из локального пакета Animate.CSS и добавить его в компонент ReactJs?

Предположим: у меня есть компонент реакции, как показано ниже, и я хочу добавить имя класса как animated bounceIn.

export class SimpleInfo extends React.Component {
   render() {
      return(
        <div>My information</div>
      )
   }
}

reactjs node.js npm-install css
person Đạt Nguyễn Tấn    schedule 27.03.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

У меня была очень похожая проблема. Я создал новое имя класса, скопировал стиль из класса animate.css и поместил новый класс с добавленным стилем css в группу reactcsstransitiongroup.

Вероятно, это не идеальный ответ на ваш вопрос, но мне это помогло.

person TheDigitalGate    schedule 28.03.2017
comment
Что ж, ваш метод хорош, но не подходит для моего контекста :)) - person Đạt Nguyễn Tấn; 29.03.2017

arrow_upward
0
arrow_downward

Не уверен, поскольку я не могу проверить это, но это должно работать.

import { bounceIn } from 'animate.css'
person Borjante    schedule 28.03.2017
comment
если вы посмотрите на файл animate.css в каталоге node_modules, вы увидите, что это чистый файл CSS. Таким образом, вам нужно импортировать его из вашего файла CSS, например. @import "~animate.css/animate.css"; См. stackoverflow.com/a/55143326/6854455 - person LJH; 14.09.2020