使用vanilla JS/CSS动画打开/关闭顶部导航栏

基础概念

Vanilla JS（纯JavaScript）和CSS动画是两种常用的网页交互技术。Vanilla JS指的是不依赖任何框架或库的纯JavaScript代码，而CSS动画则是通过CSS样式和关键帧来实现页面元素的动态效果。

优势

性能：CSS动画通常比JavaScript动画更高效，因为它们由浏览器的渲染引擎处理，而不是JavaScript引擎。
简洁性：CSS动画可以通过简单的样式和关键帧定义来实现复杂的动画效果，代码量较少。
兼容性：现代浏览器对CSS动画的支持非常好，几乎所有主流浏览器都支持。

类型

CSS Transitions：用于在一定时间内平滑地改变CSS属性值。
CSS Animations：通过@keyframes规则定义动画序列，可以控制动画的播放、暂停等。

应用场景

顶部导航栏的打开/关闭动画是一个常见的应用场景，可以提升用户体验，使界面更加生动和直观。

示例代码

以下是一个使用Vanilla JS和CSS实现顶部导航栏打开/关闭动画的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Navbar Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav id="top-nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <button id="toggle-nav">Toggle Nav</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

#top-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
    height: 0;
}

#top-nav.active {
    height: 50px;
}

#top-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#top-nav li {
    display: inline;
    margin-right: 20px;
}

#top-nav a {
    color: white;
    text-decoration: none;
    line-height: 50px;
}

JavaScript (script.js)

document.getElementById('toggle-nav').addEventListener('click', function() {
    var nav = document.getElementById('top-nav');
    nav.classList.toggle('active');
});

可能遇到的问题及解决方法

动画不流畅：
- 原因：可能是由于浏览器渲染性能问题或JavaScript执行阻塞。
- 解决方法：确保CSS动画使用硬件加速（如transform: translateZ(0)），避免在动画过程中执行复杂的JavaScript操作。

动画效果不一致：
- 原因：不同浏览器对CSS动画的支持可能有所不同。
- 解决方法：使用CSS前缀（如-webkit-、-moz-）确保兼容性，或使用Autoprefixer等工具自动添加前缀。
JavaScript事件绑定问题：
- 原因：可能是由于DOM元素未完全加载或事件绑定顺序问题。
- 解决方法：将JavaScript代码放在<body>标签底部，或使用DOMContentLoaded事件确保DOM完全加载后再绑定事件。