仅在浏览器刷新后第一次启动时按钮动画不正确答案

【问题标题】：Button animation is incorrect only when initiated for the first time after a browser refresh仅在浏览器刷新后第一次启动时按钮动画不正确
【发布时间】：2021-12-15 15:48:55
【问题描述】：

我的目标是创建一个从 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>

【问题讨论】：

标签： javascript html css css-transitions css-transforms

【解决方案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>

尽管我强烈建议从基于 js 的动画切换到具有 css-animation 语法的基于 css 的动画以及具有不同关闭和打开动画的 2 个不同类。

【讨论】：