js div slideup

div slideup 是一种常见的前端动画效果，指的是一个 div 元素从可见状态逐渐向上滑动并隐藏的过程。这种效果通常用于提升用户体验，使页面内容的显示和隐藏更加平滑和有趣。

基础概念

slideup 动画效果主要依赖于 CSS 和 JavaScript 来实现。CSS 负责定义动画的样式和过渡效果，而 JavaScript 则负责控制动画的触发时机。

类型

slideup 动画可以根据具体需求有不同的实现方式，常见的包括：

CSS3 动画：利用 CSS3 的 transition 或 animation 属性实现。
JavaScript 动画：通过 JavaScript 控制元素的样式变化来实现。
jQuery 动画：利用 jQuery 提供的动画方法来实现。

应用场景

导航菜单：当用户点击某个按钮时，导航菜单可以以 slideup 的方式展开或收起。
模态框：模态框在显示和隐藏时可以使用 slideup 动画效果。
内容切换：在内容切换时，可以使用 slideup 动画使新内容平滑地显示出来。

示例代码

以下是一个使用纯 JavaScript 和 CSS 实现 slideup 动画的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slideup Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="toggleButton">Toggle Slideup</button>
    <div id="slideupDiv" class="slideup">This is a slideup div!</div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.slideup {
    height: 100px;
    background-color: #4CAF50;
    color: white;
    line-height: 100px;
    text-align: center;
    overflow: hidden;
    transition: height 0.5s ease;
}

.slideup.hidden {
    height: 0;
}

JavaScript (script.js)

document.getElementById('toggleButton').addEventListener('click', function() {
    var slideupDiv = document.getElementById('slideupDiv');
    slideupDiv.classList.toggle('hidden');
});