閃爍WebKit的

Question

動畫漢堡菜單，當我動畫漢堡菜單改變兩個div（過渡）的margin和width，並在此期間，一個漢堡圖標它是動畫切換類is-active。

結果，你可以看到，在漢堡菜單（綠色區）內容的閃爍效應： http://www.codeply.com/go/g7Zp98paz5

執行漢堡按鈕：你可以看到，對於一些毫秒，綠色區域消失。 執行切換按鈕：您可以看到沒有跳轉。

我只在Google Chrome中複製它。

這是怎麼回事？我該如何解決這個奇怪的行爲？

我用這LIB：https://github.com/callmenick/Animating-Hamburger-Icons

Answer 1

這似乎是被什麼東西做的旋轉;評論他們使過渡正常工作：

/* active state, i.e. menu open */ 
.c-hamburger--htx.is-active span { 
    background: none; 
} 

.c-hamburger--htx.is-active span::before { 
    top: 0; 
    /*transform: rotate(45deg);*/ 
} 

.c-hamburger--htx.is-active span::after { 
    bottom: 0; 
/* transform: rotate(-45deg);*/ 
}