CSS 过渡在 Safari 中有效，但在 Chrome 中无效

Question

出于某种原因，此代码适用于 Safari 而不是 Chrome。 在 Safari 中，汉堡按钮动画成 X。在 Chrome 中，它只是在两种状态之间切换。 我是否遗漏了一些明显的东西，或者我使用了 Chrome 不支持的属性？

 var el = document.querySelector('.menu-button'); el.onclick = function() { el.classList.toggle('toggled'); }

 .menu-button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: rgba(0,0,0,0); } .menu-button:hover { cursor: pointer; } .menu-button .line { background-color: #333; width: 20px; height: 2px; border-radius: 1px; transition: margin 0.2s ease-in-out 0.2s, transform 0.2s ease-in-out 0; } .menu-button .line:last-child { margin-top: 4px; } .menu-button.toggled .line { transition-delay: 0, 0.2s; transition-property: margin, transform; } .menu-button.toggled .line:first-child { margin-top: 2px; transform: rotate(45deg); } .menu-button.toggled .line:last-child { margin-top: -2px; transform: rotate(-45deg); }

 <div class="menu-button"> <div> <div class="line"></div> <div class="line"></div> </div> </div>

Answer 1

这一行是错误的：

transition: margin 0.2s ease-in-out 0.2s, transform 0.2s ease-in-out 0;

应该：

transition: margin 0.2s ease-in-out, transform 0.2s ease-in-out;

编辑：

如果将s添加到最后的0则它在 chrome 中有效：

transition: margin 0.2s ease-in-out 0.2s, transform 0.2s ease-in-out 0s;