当 div 高度在 onClick 事件上发生变化时平滑移动文本

Question

我有 2div，当我更改右侧 div 的高度时，我希望左侧的文本保持居中但平滑移动，而不是跳到新的中心。我尝试过过渡，但我就是不明白。

多伦多证券交易所：

<div className="description">
                <div className='description-left'>
                    <p>Short description</p>
                    <ul className='description-points'>
                        <li>
                            <button className={clsx('btn-info', isAboutMeActive && "active")} onClick={handleClickAbout}>
                                About 
                            </button>
                        </li>
                        <li>
                            <button className={clsx("btn-info", isMyExperienceActive && "active")} onClick={handleClickExperience}>
                                Past Experience
                            </button>
                        </li>
                    </ul>
                </div>
                <div className={clsx('description-right', heightState && 'more-info-active')}>
                    {isAboutMeActive && <AboutMe />}
                    {isMyExperienceActive && <Experience newHeight={newHeight} />}
                </div>
</div>

CSS：

.description {
margin: 0.4rem auto 0 auto;
max-width: 50%;
float: none;
display: flex;
justify-content: center;
align-items: center;
}
.description-left {
display: flex;
justify-content: center;
flex-direction: column;
flex: 0.5;
height: 100%;
box-shadow: 10px 0px 2px -2px #d3d3d3;
}
.description-right {
display: flex;
align-items: center;
flex: 1.5;
padding-left: 2rem;
height: 46vh;
color: var(--darkGrey);
}
.more-info-active {
height: 55vh;
}

Answer 1

试试这是 css 文件： html { scroll-behavior: smooth; }