AngularJS动画闪烁iOS

Question

我在我的AngularJS应用程序中使用了幻灯片动画，代码如下。

当转换启动时，原始和未解析的传入视图将在现有视图下显示一秒钟。这会导致iOS7上的一个恼人的闪烁。

我怎么才能移除这个闪光灯？

  .view-animate-container {
    position: relative;
    width: 100%;
  }

  .view-animate {
    -webkit-backface-visibility: hidden;
  }

  .view-animate.ng-enter, .view-animate.ng-leave {
    -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;

    position: absolute;
    width: 100%;
  }

  .rtl .view-animate.ng-enter {
    -webkit-transform: translate3d(100%, 0, 0);
    -webkit-transition-delay: 0.1s;
    opacity: 0;
  }
  .rtl .view-animate.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .rtl .view-animate.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  .ltr .view-animate.ng-enter {
    -webkit-transform: translate3d(-100%, 0, 0);
    -webkit-transition-delay: 0.1s;
    opacity: 0;
  }
  .ltr .view-animate.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .ltr .view-animate.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  /* End of View animations */

Answer 1

这种闪烁似乎是由z指数故障引起的。

添加以下css并加以修正：

    .view-animate.ng-leave {
        z-index: 1054;
    }
    .view-animate.ng-enter {
        z-index: 1053;
    }

仍然有可能在刷新或初始加载时仍然会出现闪烁。如果要在app.run上的$routeChangeStart上的根目录中定义ltr / rtl方向，我建议您在当前路由“未定义”时避免定义方向。

Answer 2

您要寻找的是ngCloak指令。

ngCloak指令用于防止浏览器在加载应用程序时以其原始(未编译)形式简要显示角html模板。使用此指令可避免因html模板显示而产生的不受欢迎的闪烁效果。

这里有更多详细信息：http://docs.angularjs.org/api/ng/directive/ngCloak

用法：

<div id="template1" ng-cloak>{{ 'hello' }}</div>