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

Question

我正在为汉堡菜单设置动画，更改两个 div 的 margin 和 width（带有过渡），同时，它是一个 汉堡图标动画切换类is-active。

如您所见，结果是汉堡菜单内容（绿色区域）的闪烁效果： http://www.codeply.com/go/g7Zp98paz5

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

我只在谷歌浏览器中复制它。

发生了什么？我该如何解决这种奇怪的行为？

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