React中onClick事件实现文本平滑过渡的问题

你的问题出在直接通过条件渲染挂载/卸载组件，DOM元素被直接创建或销毁，CSS过渡根本没法触发。要实现流畅过渡，得让元素始终留在DOM里，通过修改样式控制可见性。

修改方案： #

1. 移除条件渲染逻辑，让<Text />始终渲染
2. 用Tailwind的过渡类结合max-height、opacity属性实现平滑过渡
3. 根据isVisible状态切换样式

修改后的完整代码： #

import React, { useState} from 'react'
import { Link } from 'react-scroll';

export default function About() {
  const [isVisible, setVisible] = useState(true);

  const onClick = () => setVisible(!isVisible);

const Text = () => 
    <div className={`overflow-hidden transition-all ease-in-out duration-500 ${
        isVisible ? 'max-h-[9999px] opacity-100' : 'max-h-0 opacity-0'
      }`}>
            <p>Since then I have gotten my BA in Education, owned and ran my own company with a handful of employees, gotten married, and had an amazing son! All in a days work right?! Well not quite, 
              but I've definitely learned stuff along the way!</p>
            <br></br>
            <p>Web development has always been something that never fully left me. Regardless of what I was doing in life I was usually "inspecting" pages, and sometimes manipulating little things just for the 
              fun of it. I never really gave development a full chance until I decided that I needed a real career change. My current job of 17 years wasn't going to cut it once my son came along.</p>
            <br></br>
            <p>So with that in mind I buckled down and pursued something I should have gone after almost 20 years ago, and it sure has been fun getting to this point! Once the old keystrokes started up 
              everything started to feel familiar again. Not quite the same of course, but those little "Oh yeahs!" from memories resparked. Two years later and here I am getting a little better every day!</p>
            <br></br>
            <p>My Front-End journey has been exciting so far, and I'm even MORE excited to keep building upon the knowledge that I've gained so far! After I get more settled in the FE area my next goal is to go 
              Full-Stack. Keep your goals centered and your eyes on the prize. A little bit of coding every day can go a long way in the grand aspect of it all. Thanks for reading!</p>
    </div>;

  return (
    <div id="About" className="pt-32 bg-[#4bb3f8] text-black">
        <h1 className="w-full text-2xl font-bold text-center hover:scale-105 duration-300">ABOUT</h1>
          <div  className="p-10 text-center font-bold md:text-lg mx-24">
            <p>My name is Guy and I'm from City. Growing up in the times of Geocities and Maxpages (dating myself I know!) 
              tampering with websites was definitely a hobby of mine. My friends and I would edit and add everything we could to see who would climb the rankings on Maxpages and be the most visited/liked! 
              That really seems like a lifetime ago, and boy do I wish I would have stuck with that route in life!</p>
            <br></br>
            <div>
              <Text />
              <Link to="About" spy={true} smooth={true} offset={-80} duration={600}>
                <button className="italic underline" onClick={onClick}>{isVisible? 'Read Less!' : 'Read More!'}</button>
              </Link>
            </div>
          </div>
    </div>
  )
}

关键说明： #

• overflow-hidden：防止内容在过渡时溢出
• max-h-[9999px]：设置一个足够大的最大高度，确保能容纳所有内容；隐藏时设max-h-0
• opacity-100/opacity-0：配合高度变化实现淡入淡出效果
• transition-all ease-in-out duration-500：让所有可过渡属性（高度、透明度）都应用500ms的平滑过渡

这样修改后，显示隐藏就会有流畅的过渡效果了。

内容的提问来源于stack exchange，提问作者Metalmilitian85