如何在 ReactJs 中向侧边栏导航添加动画？

Question

好吧，

我正在尝试构建一个 Google Gemini 克隆，并且我已经成功制作了 UI，但当我单击菜单图标时，我无法让侧边栏“平滑”滚动，它会立即发生。有人可以解释我做错了什么吗？我不确定是否应该添加 CSS 过渡属性或其他内容，已经在 .sidebar 类上尝试过，但它不起作用。

这是我迄今为止尝试过的代码：

    import React, { useState } from 'react'
     import './Sidebar.css'
     import { assets } from '../../assets/assets'

     const Sidebar = () => {


     const [extended, setExtended] = useState(false);


     return (
        <div className='sidebar'>
            <div className="top">
                <img onClick={() => setExtended(prev => !prev)} className='menu' src={assets.menu_icon} alt="" />
                <div className="new-chat">
                    <img src={assets.plus_icon} alt="" />
                    {extended ? <p>New Chat</p> : null}
                </div>
                {extended ?
                    <div className="recent">
                        <p className="recent-title">Recent</p>
                        <div className="recent-entry">
                            <img src={assets.message_icon} alt="" />
                            <p>What is react ...</p>
                        </div>
                    </div> : null}
            </div>


            <div className="bottom">
                <div className="bottom-item recent-entry">
                    <img src={assets.question_icon} alt="" />
                    {extended ? <p>Help</p> : null}
                </div>
                <div className="bottom-item recent-entry">
                    <img src={assets.history_icon} alt="" />
                    {extended ? <p>Activity</p> : null}
                </div>
                <div className="bottom-item recent-entry">
                    <img src={assets.setting_icon} alt="" />
                    {extended ? <p>Settings</p> : null}
                </div>
            </div>
        </div>
    )
}

export default Sidebar





 .sidebar{
    min-height: 100vh;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #f0f4f9;
    padding: 25px 15px;

}

.sidebar img{
    width: 20px;
}

.sidebar .menu{
    display: block;
    margin-left: 10px;
    cursor: pointer;
}

.sidebar .new-chat{
    margin-top: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: #e6eaf1;
    border-radius: 50px;
    font-size: 14px;
    color: grey;
    cursor: pointer;
}

.sidebar .recent{
    display: flex;
    flex-direction: column;
}

.sidebar .recent-title{
    margin-top: 30px;
    margin-bottom: 20px;
}

.sidebar .recent-entry{
    display: flex;
    align-items: start;
    gap: 10px;
    padding: 10px;
    padding-right: 40px;
    border-radius: 50px;
    color: #282828;
    cursor: pointer;
}

.sidebar .recent-entry:hover{
    background-color: #e2e6eb;
    transition: 0.3s;
}

.sidebar .bottom{
    display: flex;
    flex-direction: column;
}

.sidebar .bottom-item{
     padding-right: 10px;
     cursor: pointer;
}

`

Answer 1

您遇到的问题是，仅当“扩展”为 true 时才呈现导航。添加过渡不会影响这一点，因为如果元素不存在则无法过渡。您可以做的是将元素推离屏幕，而不是不渲染它。这可以通过多种方式完成，但最简单的方法是应用位置：相对于侧边栏并将左侧（或右侧，取决于导航位置）值更新为将其推离屏幕的值。

.offscreen {
  position: absolute;
  left: 200px
}

接下来要为其设置动画，您只需在左侧（或右侧）属性上添加一个过渡。确保不要将其添加到 .offscreen 类中，因为这样它只会以动画方式出来，而不会滑回。

.sidebar{
  ...
  transition: left 1s
}

希望这有帮助