Android Google Chrome menu-burger 转换问题（translateY 无法正常工作）答案

【问题标题】：Android Google Chrome menu-burger transition issue(translateY doesn't work properly)Android Google Chrome menu-burger 转换问题（translateY 无法正常工作）
【发布时间】：2021-06-20 09:59:11
【问题描述】：

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 - 过渡变为。它在桌面 Google Chrome 中正常工作，但在 Android 上的 Chrome 中，没有显示 translateY 的顶线和底线的过渡，最后它只是“跳转”到最终状态。有谁知道这里的问题是什么，有没有办法解决它？非常感谢！

【问题讨论】：

标签： css-transitions css-transforms android-chrome

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

【讨论】：