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-index毛刺引起的。

添加以下css，应该修复：

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

刷新或初始加载时仍可能出现闪烁现象。如果你在$ routeChangeStart的rootscope中的app.run中定义ltr / rtl方向，我建议你在当前路由未定义的情况下阻止定义方向＆＃39;。

Answer 2

您正在寻找的是ngCloak指令。

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。

此处有更多详情：http://docs.angularjs.org/api/ng/directive/ngCloak

用法：

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

AngularJS动画闪烁iOS

2 个答案: