在WebKit上动画汉堡菜单时闪烁

Question

我正在制作汉堡菜单的动画，改变两个div的margin和width(带过渡)，同时，一个汉堡图标它正在动画切换is-active类。

结果，正如你所看到的，是汉堡菜单内容的闪烁效果(绿色区域):http://www.codeply.com/go/g7Zp98paz5

执行汉堡按钮:您可以看到，在几毫秒内，绿色区域消失了。执行切换按钮:您可以看到没有跳转。

我只在Google Chrome中复制它。

发生什么事了?我怎样才能纠正这种奇怪的行为呢?

我正在使用这个库: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);*/
}