css - ng-animate 在 iOS 上导致闪烁

Question

我正在尝试使用 ng-animate 将侧边导航菜单滑入和滑出。它运行良好，除了菜单在滑入之前在其最终状态下会出现初始闪烁。这是 CSS:

&.ng-enter,
&.ng-leave-active {
  @include translate(-100%, 0)
}

&.ng-enter-active {
  @include translate(0, 0);
}

Answer 1

我以前遇到过这个问题，我的诀窍是添加

-webkit-backface-visibility: hidden;

我也通过添加

取得了成功

-webkit-transform:translate3d(0,0,0);

还有

-webkit-transform-style: preserve-3d;

对于类似的东西。

因此您可以像这样测试一个或所有 3 个:

.myAnimElement {
    -webkit-backface-visibility: hidden;
    -webkit-transform:translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
}

(一定要把不用的拿掉)希望这些对你有帮助!

编辑:谷歌搜索显示其他人发现这是解决方法

 -webkit-perspective: 1000;
 -webkit-backface-visibility: hidden;

所以如果前面的答案不起作用，您也可以试试这个。