如何在Next.js中实现仿苹果官网导航栏状态切换动画？

你的核心问题是用了hidden类直接隐藏元素，而display: none无法触发CSS过渡动画。下面是修复后的完整代码，同时优化了动画逻辑，贴合苹果官网的交互效果：

import React, { useState } from 'react'
import { XMarkIcon } from '@heroicons/react/24/solid'

type Props = {}
const SearchBar = (props: Props) => {
    const [show, setShow] = useState(false);

    return (
        <div className="bg-gray-800 min-h-screen">
            {/* 导航栏 */}
            <div 
                className={`h-8 z-20 fixed left-0 top-0 right-0 p-10 transition-all duration-500 ease ${
                    show ? 'opacity-0 translate-y-[-100%]' : 'opacity-100 translate-y-0'
                }`} 
                id="nav-container"
            >
                <nav className="w-[1000px] ml-auto mr-auto pl-2 pr-2">
                    <ul className="flex justify-between content-center" id="desktop-nav">
                        <li><a href="#" id="link-logo"></a></li>
                        <li><a className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#">Mac</a></li>
                        <li><a className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#">iPad</a></li>
                        <li><a className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#">iPhone</a></li>
                        <li><a className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#">Watch</a></li>
                        <li><a className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#">TV</a></li>
                        <li><a className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#">Music</a></li>
                        <li><a onClick={() => setShow(true)} className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#">Support</a></li>
                        <li><a className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#" id="link-search"></a></li>
                        <li><a className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#" id="link-bag"></a></li>
                    </ul>
                </nav>
            </div>

            {/* 搜索栏 */}
            <div 
                id="search-container" 
                className={`w-[60%] mt-0 mb-0 mr-auto ml-auto fixed top-0 z-20 pr-11 pl-11 left-0 right-0 transition-all duration-500 ease ${
                    show ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'
                }`}
            >
                <div id="link-search" className="absolute left-3">
                    <div id="search-bar">
                        <form action="" className="mt-0 mb-0 ml-auto mr-auto w-full">
                            <input 
                                className="w-full h-11 m-auto outline-none border-none bg-transparent text-white font-sans text-xl"
                                type="text" 
                                placeholder="Search apple.com/ca"
                            />
                        </form>
                    </div>

                    <XMarkIcon 
                        onClick={() => setShow(false)} 
                        id="link-close"
                        className="absolute top-2.5 right-3 opacity-40 h-5 w-5 text-blue-500 transition-opacity duration-300 hover:opacity-100 cursor-pointer"
                    />

                    <div className="bg-white text-black absolute left-0 right-0 pt-4 pb-4 pl-2 pr-2 rounded-b-lg w-[600px]">
                        <h2 className="text-lg font-bold ml-8 mr-8 mt-2.5">Quick Links</h2>
                        <ul className="mt-3">
                            <li><a className="inline-block w-full pt-2 pb-2 pl-14 pr-14 hover:bg-[#f5f5f5] hover:text-[#2997ff]" href="#">Visiting an Apple Store FAQ</a></li>
                            <li><a className="inline-block w-full pt-2 pb-2 pl-14 pr-14 hover:bg-[#f5f5f5] hover:text-[#2997ff]" href="#">Shop Apple Store Online</a></li>
                            <li><a className="inline-block w-full pt-2 pb-2 pl-14 pr-14 hover:bg-[#f5f5f5] hover:text-[#2997ff]" href="#">Accessories</a></li>
                            <li><a className="inline-block w-full pt-2 pb-2 pl-14 pr-14 hover:bg-[#f5f5f5] hover:text-[#2997ff]" href="#">AirPods</a></li>
                            <li><a className="inline-block w-full pt-2 pb-2 pl-14 pr-14 hover:bg-[#f5f5f5] hover:text-[#2997ff]" href="#">AirTag</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            {/* 遮罩层 */}
            <div 
                className={`fixed w-full h-screen left-0 top-0 transition-all duration-500 ease ${
                    show ? 'bg-[#606060]/80 opacity-100' : 'opacity-0 pointer-events-none'
                }`} 
                id="overlay"
            ></div>
        </div>
    )
}
export default SearchBar

关键修改说明 #

• 导航栏动画：移除hidden类，改用opacity-0 translate-y-[-100%]实现向上淡出隐藏，默认状态为opacity-100 translate-y-0，配合transition-all实现平滑过渡
• 搜索栏动画：初始状态设置为opacity-0 scale-95 pointer-events-none（缩放+透明，同时禁用点击），显示时切换为opacity-100 scale-100，模拟苹果官网的搜索栏弹出效果
• 遮罩层优化：添加半透明背景色，通过opacity过渡实现淡入淡出，同时用pointer-events-none避免隐藏时干扰页面交互
• 冗余代码清理：删除了无用的空<p>标签，调整了关闭按钮的定位（从固定left改为right，更合理）

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