Question

const menu = document.querySelector(".mini-menu");

menu.addEventListener("click", () => menu.classList.toggle("opened"));

html, body
{
  width: 100%;
  height: 100%;
  margin: 0;
}

.container
{
  display: flex;  
  width: 100%;
  height: 100%;
  background: #47b6e04a;
  justify-content: center;
  align-items: center;
}

.mini-menu
{        
  cursor: pointer;
  transition: all .4s linear;
}

.line
{
  transition: all .4s linear;
  transform-origin: center;
}   

.mini-menu.opened
{
  transform: rotate(45deg);
}

.mini-menu.opened .line_top
{
  transform: translateY(24px); 
}

.mini-menu.opened .line_mid
{            
  transform: rotate(-90deg);
}

.mini-menu.opened .line_bottom
{
  transform: translateY(-24px);
}

<div class="container">  
    <svg xmlns="http://www.w3.org/2000/svg" width=80 height=80 stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="mini-menu">   
      <line x1="6" y1="16" x2="74" y2="16" class="line line_top"></line>
      <line x1="6" y1="40" x2="74" y2="40" class="line line_mid"></line> 
      <line x1="6" y1="64" x2="74" y2="64" class="line line_bottom"></line>
   </svg>   
</div>

点击 menu-burger - 过渡变成。它在桌面谷歌浏览器中正常工作，但在 Android 上的 Chrome 中没有显示 translateY 的顶线和底线的转换，最后它只是“跳转”到最终状态。有谁知道这里的问题是什么，有没有办法解决它？非常感谢！

Answer 1

所以，问题似乎出在翻译 SVG 上。刚刚更改了代码，现在可以顺利运行了。

const menu = document.querySelector(".mini-menu");

menu.addEventListener("click", () => menu.classList.toggle("opened"));

html, body
{
  width: 100%;
  height: 100%;
  margin: 0;
}

.container
{
  display: flex;  
  width: 100%;
  height: 100%;
  background: #47b6e04a;
  justify-content: center;
  align-items: center;
}

.mini-menu
{ 
  display: flex;  
  flex-direction: column;  
  width: 70px;
  height: 92px;
  cursor: pointer;
  transition: all .4s linear;
}

.line
{
  margin-bottom: 20px;
  width: 100%;
  height: 4px;
  background: #000;
  transition: all .4s linear;
  
}   

.line_top
{
  margin-top: 20px;
}

.line_bottom
{
  margin-bottom: 0;
}

.mini-menu.opened
{
  transform: rotate(45deg);
}

.mini-menu.opened .line_top
{
  transform: translateY(24px); 
}

.mini-menu.opened .line_mid
{            
  transform: rotate(-90deg);
}

.mini-menu.opened .line_bottom
{
  transform: translateY(-24px);
}

<div class="container">  
    <div class="mini-menu">
      <div class="line line_top"></div>
      <div class="line line_mid"></div>
      <div class="line line_bottom"></div>
    </div>
</div>

Android Google Chrome 菜单-汉堡转换问题（translateY 无法正常工作）

1 个答案: