仅在浏览器刷新后首次启动时按钮动画不正确

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>

即使我强烈建议从基于 js 的动画切换到基于 css 的动画，使用 css-动画语法和 2 种不同的类以及不同的关闭和打开动画。

仅在浏览器刷新后首次启动时按钮动画不正确

Button animation is incorrect only when initiated for the first time after a browser refresh

html

javascript

css

css-transitions

css-transforms