使用 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 */ }

有没有什么方法可以使用 Tailwind CSS 处理

react-transition-group

的过渡，而无需导入 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',
}}

Answer 2

为了扩展@Saman 答案，这里有一个使用 TailwindCSS 类的外观/进入时的简单淡入和退出时的淡出：

const classNames = {
  appear: "opacity-0",
  appearActive: "transition-opacity duration-300 opacity-100",
  enter: "opacity-0",
  enterActive: "transition-opacity duration-300 opacity-100",
  // exit: "opacity-100",  // this breaks the exit transition
  exitActive: "transition-opacity duration-200 opacity-0",
};

Answer 3

我想就之前的回复提供一些补充说明。使用 React Transition Group 时，

appear/enter/exit

和

appear/enter/exit-active

类都连接在一起。

让我们考虑@Kuba 的例子：

最初，元素的样式包括：

"opacity-0"

然而，在指定的延迟之后，风格演变为：

"opacity-0 transition-opacity duration-300 opacity-100"

（注意

opacity-

两者都存在）。

为了按预期过渡到功能，至关重要的是

opacity-100

被定义为 CSS 中的最终类。由于我们无法保证这一点，因此可以使用的替代方法是

!important

。

完整代码：

const classNames = {
  appear: "opacity-0",
  appearActive: "transition-opacity duration-300 !opacity-100",
  enter: "opacity-0",
  enterActive: "transition-opacity duration-300 !opacity-100",
  // exit: "opacity-100",  // this breaks the exit transition
  exitActive: "transition-opacity duration-200 !opacity-0",
};