问难以为旋转木马组件设计样式，因此它取代了周围的div。

EN

import { useState } from "react";
import { useTransition, animated, config } from "@react-spring/web";

export default function Carousel() {
  const [toggle, set] = useState(false);
  const transitions = useTransition(toggle, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    reverse: toggle,
    delay: 200,
    config: config.molasses,
    onRest: () => set(!toggle)
  });
  return (
    <div className="relative">
      {transitions(({ opacity }, item) =>
        item ? (
          <animated.div
            className="absolute left-0 top-0 right-0"
            style={{
              opacity: opacity.to({ range: [0.0, 1.0], output: [0, 1] })
            }}
          >
            <div className="m-8 main-content grid bg-gray-700 p-3 sm:p-8 md:p-8 rounded-lg">
              <div className="m-0 pt-6 pb-2 flex flex-col lg:flex-row items-center lg:px-8 md:px-6 sm:px-4 px-2">
                <div>
                  <img
                    alt="user avatar"
                    className="border-8 border-gray-500 flex-none h-20 w-20 rounded-full"
                    src="https://joeschmoe.io/api/v1/jon"
                  />
                </div>
                <div className="flex flex-row grow m-0 p-0 pt-8 lg:w-2/3 lg:pl-4">
                  <div className="-mt-3 text-6xl text-gray-400 text-right">
                    “
                  </div>
                  <div className="m-0 pl-3 pt-6 text-xl text-justify italic text-gray-600">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit
                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                    occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                    <div className="mt-4 w-full text-right not-italic">
                      — John Doe, Software Engineer
                    </div>
                  </div>
                  <div className="-mt-3 pl-3 text-6xl text-gray-400">”</div>
                </div>
              </div>
            </div>
          </animated.div>
        ) : (
          <animated.div
            className="absolute left-0 top-0 right-0"
            style={{
              position: "absolute",
              float: "left",
              opacity: opacity.to({ range: [1.0, 0.0], output: [1, 0] })
            }}
          >
            <div className="m-8 main-content grid bg-gray-700 p-3 sm:p-8 md:p-8 rounded-lg">
              <div className="m-0 pt-6 pb-2 flex flex-col lg:flex-row items-center lg:px-8 md:px-6 sm:px-4 px-2">
                <div>
                  <img
                    alt="user avatar"
                    className="border-8 border-gray-500 flex-none h-20 w-20 rounded-full"
                    src="https://joeschmoe.io/api/v1/jill"
                  />
                </div>
                <div className="flex flex-row grow m-0 p-0 pt-8 lg:w-2/3 lg:pl-4">
                  <div className="-mt-3 text-6xl text-gray-400 text-right">
                    “
                  </div>
                  <div className="m-0 pl-3 pt-6 text-xl text-justify italic text-gray-600">
                    Sed ut perspiciatis unde omnis iste natus error sit
                    voluptatem accusantium doloremque laudantium, totam rem
                    aperiam, eaque ipsa quae ab illo inventore veritatis et
                    quasi architecto beatae vitae dicta sunt explicabo. Nemo
                    enim ipsam voluptatem quia voluptas sit aspernatur aut odit
                    aut fugit, sed quia consequuntur magni dolores eos qui
                    ratione voluptatem sequi nesciunt. Neque porro quisquam est,
                    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
                    velit, sed quia non numquam eius modi tempora incidunt ut
                    labore et dolore magnam aliquam quaerat voluptatem.{" "}
                    <div className="mt-4 w-full text-right not-italic">
                      — Jane Doe, Software Engineer
                    </div>
                  </div>
                  <div className="-mt-3 pl-3 text-6xl text-gray-400">”</div>
                </div>
              </div>
            </div>
          </animated.div>
        )
      )}
    </div>
  );
}