只有在浏览器刷新后第一次启动按钮动画时，按钮动画才不正确

Question

我的目标是创建一个菜单按钮，它可以从3条水平线过渡到一个'X‘。

我已经设法做到了这一点，但我有一个小问题是，只有在第一次点击之后，动画才是完美的。如果我刷新浏览器并单击按钮，它将无法正确执行。

我很难注意到如果我像我想的那样让动画停留在0.1秒，所以我把它减慢到了1秒。

这是所有相关的代码，你可以复制并粘贴它来测试它。请记住，这是使用浏览器为iPhone 6/7/8 Plus创建的理想配置。

​

const menuButton = document.querySelector('.menu-button')
const menuButtonLines = document.querySelectorAll('.line')

let menuIsOpen = false;

// functions for MenuButton

let changeOpacity = x => {
  if (menuIsOpen === false) {
    menuButtonLines[x].style.transition = 'opacity 1s linear'
    menuButtonLines[x].style.opacity = '0%'
  } else if (menuIsOpen === true) {
    menuButtonLines[x].style.transition = 'opacity 1s linear'
    menuButtonLines[x].style.opacity = '100%'
  }
}

let rotateAndAdjustMenuButtonXLines = (x, y) => {
  if (menuIsOpen === false) {
    menuButtonLines[x].style.transition = 'all 1s linear'
    menuButtonLines[y].style.transition = 'all 1s linear'
    menuButtonLines[x].style.transform = 'rotate(45deg)'
    menuButtonLines[y].style.transform = 'rotate(-45deg)'
    menuButtonLines[x].style.top = '42.5%'
    menuButtonLines[y].style.bottom = '42.5%'
  } else if (menuIsOpen === true) {
    menuButtonLines[x].style.transition = 'all 1s linear'
    menuButtonLines[y].style.transition = 'all 1s linear'
    menuButtonLines[x].style.transform = 'rotate(0deg)'
    menuButtonLines[y].style.transform = 'rotate(0deg)'
    menuButtonLines[x].style.top = '0%'
    menuButtonLines[y].style.bottom = '0%'
  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: 'Inter', sans-serif;
}

/* button styling removal code */

button {
    background: transparent;
    box-shadow: 0px 0px 0px transparent;
    border: 0px solid transparent;
    text-shadow: 0px 0px 0px transparent;
}

button:hover {
    background: transparent;
    box-shadow: 0px 0px 0px transparent;
    text-shadow: 0px 0px 0px transparent;
}

button:active {
    outline: none;
    border: none;
}

button:focus {
    outline: 0;
}

/* ---------------------------------------- */

body {
    height: 100%;
    width: 100%;
}

.logo-and-menu-buttom {
    background-color: white;
    height: 17.5vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.menu-button {
    border: 0.3vh solid black;
    border-radius: 0.25vh;
    width: 20%;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.line-container {
    height: 40%;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.line {
    position: relative;
    border: 0.1vh solid black;
    border-radius: 100vh;
    width: 100%;
}

.menu-button p {
    font-weight: bold;
    letter-spacing: 0.1vh;
}

<section class="logo-and-menu-buttom">
  <button class="menu-button">
                <div class="line-container">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
                <p>Menu</p>
            </button>
</section>

​

Answer 1

问题是你的“正确”动画依赖于你通过js赋予元素的风格，而不是html和css，因此它们在js被触发之前是不存在的，因此它第一次看起来不一样。

要解决您的问题，您需要做的就是添加这些样式，因此将您的html从：

<div class="line-container">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

至：

<div class="line-container">
  <div class="line" style="top: 0"></div>
  <div class="line"></div>
  <div class="line" style="bottom: 0"></div>
</div>

尽管如此，我还是强烈建议使用css动画语法从基于js的动画切换到基于css的动画，并使用2个不同的类使用不同的结束和开始动画。