js 点击切换div特效

在JavaScript中实现点击切换div特效，通常涉及到HTML、CSS和JavaScript的结合使用。以下是一个基础的示例，展示如何通过点击按钮来切换div的显示和隐藏，并添加一些特效。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Div切换特效</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="toggleButton">切换Div</button>
    <div id="myDiv" class="hidden">这是一个Div元素</div>

    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.hidden {
    display: none;
}

.fade-in {
    animation: fadeIn 1s;
}

.fade-out {
    animation: fadeOut 1s;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

JavaScript部分（script.js）

document.getElementById('toggleButton').addEventListener('click', function() {
    var div = document.getElementById('myDiv');
    if (div.classList.contains('hidden')) {
        div.classList.remove('hidden');
        div.classList.add('fade-in');
        // 移除淡入动画类，以便下次可以重新添加
        div.addEventListener('animationend', function() {
            div.classList.remove('fade-in');
        }, {once: true});
    } else {
        div.classList.add('fade-out');
        // 移除淡出动画类，并隐藏div
        div.addEventListener('animationend', function() {
            div.classList.add('hidden');
            div.classList.remove('fade-out');
        }, {once: true});
    }
});

解释

HTML: 创建了一个按钮和一个div元素。div元素初始时带有hidden类，使其隐藏。
CSS: 定义了.hidden类来隐藏元素，以及.fade-in和.fade-out类来实现淡入淡出的动画效果。
JavaScript:
- 为按钮添加了点击事件监听器。
- 当按钮被点击时，检查div是否隐藏（即是否包含hidden类）。
- 如果div隐藏，则移除hidden类并添加fade-in类以显示淡入动画。动画结束后，移除fade-in类以便下次可以重新添加。
- 如果div可见，则添加fade-out类以显示淡出动画。动画结束后，添加hidden类并移除fade-out类以隐藏div。