在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);*/
}