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;