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

Posted 2023-03-06

【中文标题】仅在浏览器刷新后第一次启动时按钮动画不正确

【英文标题】：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>

【参考方案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 个不同类。