时间戳

首页 > 解决方案 > 由 Javascript 添加时，CSS 动画不起作用

javascript - 由 Javascript 添加时，CSS 动画不起作用

问题描述

我正在尝试制作一个汉堡图标按钮。当您单击它时，顶线和底线应该向左移动，中间的线应该消失，但是当我单击它时，什么也没有发生。我已经在浏览器中打开了 JavaScript，但是没有用。我以为是代码编辑器，所以我下载了 atom（我通常使用 VS 代码），但这也不起作用。

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
    if(!menuOpen){
        menuBtn.classList.add('open');
        menuOpen = true;
    } else {
        menuBtn.classList.remove('open');
        menuOpen = false;
    }
});
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    background: #272727;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.menu-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    border: 3px solid #fff
}

.menu-btn__burger {
    width: 50px;
    height: 6px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgb(255, 101, 47, .2);
    transition: all .5s ease-in-out;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 6px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255,201,47,.2);
    transition: all .5s ease-in-out;
}

.menu-btn__burger::before {
    transform: translateY(-16px);
}

.menu-btn__burger::after {
    transform: translateY(16px);
}

/* ANIMATION */
.menu-btn.open .menu-btn__burger {
    transform: translateX( -50px);
    background: transparent;
    box-shadow: none;
}
<body>
    <div class="menu-btn">
        <div class="menu-btn__burger"></div>
    </div>
</body>

标签： javascripthtmlcsscss-animations

解决方案

你的代码已经很好了。它运作良好。也许您忘记刷新窗口 :)
另外，如果您还不知道，您可以使用elem.classList.toggle("class")代替if-else条件。

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
    menuBtn.classList.toggle("open");
    menuOpen = !menuOpen;
});
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    background: #272727;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.menu-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    border: 3px solid #fff
}

.menu-btn__burger {
    width: 50px;
    height: 6px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgb(255, 101, 47, .2);
    transition: all .5s ease-in-out;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 6px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255,201,47,.2);
    transition: all .5s ease-in-out;
}

.menu-btn__burger::before {
    transform: translateY(-16px);
}

.menu-btn__burger::after {
    transform: translateY(16px);
}

/* ANIMATION */
.menu-btn.open .menu-btn__burger {
    transform: translateX( -50px);
    background: transparent;
    box-shadow: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS hamburger Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="menu-btn">
        <div class="menu-btn__burger"></div>
    </div>
    <script src="main.js"></script>
</body>
</html>

推荐阅读