使用 Tailwind CSS 反应过渡组

Question

<TransitionGroup>我正在尝试使用附带<CSSTransition的来实现轮播react-transition-group。我正在使用CSS框架Tailwind CSS。但是，在使用 时<CSSTransition />，我们必须导入 css。

组件.js

<TransitionGroup>
    {itemArray.map((item, idx) => (
        <CSSTransition
            timeout={350}
            classNames={direction}
            key={Math.random() + idx}>
            <div className="relative mt-8 max-w-full inline-flex">
              {item?.item}
            </div>
        </CSSTransition>
    ))}
</TransitionGroup>

样式.css

.right-enter{ /* style */ }
.left-enter { /* style */ }

有没有什么方法react-transition-group可以使用 Tailwind CSS 处理过渡而不需要导入 css。

我尝试使用 来实现相同的<Transition>，但是如果类在生命周期（onEnter，onEntered）上更新，它将抛出too many re-renders错误。

Answer 1

您可以通过React Transition Group使用此方法：

classNames={{
 appear: 'your tailwindcss codes',
 appearActive: 'your tailwindcss codes',
 appearDone: 'your tailwindcss codes',
 enter: 'your tailwindcss codes',
 enterActive: 'your tailwindcss codes',
 enterDone: 'your tailwindcss codes',
 exit: 'your tailwindcss codes',
 exitActive: 'your tailwindcss codes',
 exitDone: 'your tailwindcss codes',
}}