如何使用带有 Tailwind 和 react.js 的动画显示模式？答案

【问题标题】：How can I show a modal using an animation with Tailwind and react.js?如何使用带有 Tailwind 和 react.js 的动画显示模式？
【发布时间】：2022-01-26 02:00:54
【问题描述】：

当我单击模态框时，我正在尝试使用动画来显示模态框，但我无法使用 Tailwind 和 react 来做到这一点。

这是我的代码：

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import Wrapper from "./Wrapper";
import Input from "./Input";

import "./styles.css";
import Button from "./Button";
import Modal from "./Modal";

function App() {
  const [showModal, setShowModal] = useState(false);
  const handleShowModal = useCallback(() => {
    setShowModal(!showModal);
  }, [showModal]);
  const handleCloseModal = useCallback(() => {
    setShowModal(false);
  }, []);
  return (
    <div className="p-4">
      <h1 className="text-red-500 text-center">PlayGround</h1>
      <Wrapper className="p-2">
        <Input />
      </Wrapper>
      <Wrapper className="p-2">
        <Button onClick={handleShowModal}>Show Modal</Button>
        {showModal && <Modal onCancel={handleCloseModal} />}
      </Wrapper>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

你可以在这里看到我的完整代码：

my full project

我想要这样的东西：

the goal

我该怎么做？

非常感谢！

【问题讨论】：

标签： javascript reactjs tailwind-css

【解决方案1】：

我推荐使用headless ui

你可以这样使用

import { Transition } from '@headlessui/react'
import { useState } from 'react'

function MyComponent() {
  const [isShowing, setIsShowing] = useState(false)

  return (
    <>
      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>
        Toggle
      </button>
      <Transition
        show={isShowing}
        enter="transition-opacity duration-75"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity duration-150"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        I will fade in and out
      </Transition>
    </>
  )
}

【讨论】：