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-index的故障引起的。

添加以下的CSS，它應該是固定的：

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

它仍然是可能的將在刷新或初始負載仍然發生閃爍。如果您在$ routeChangeStart的rootcope中的app.run中定義ltr/rtl方向，則建議您防止當前路由爲'未定義'時定義方向。

Answer 2

你在找什麼是ngCloak指令。

ngCloak指令用於防止瀏覽器在加載應用程序時以原始（未編譯）形式簡要顯示Angular html模板。使用此指令可避免由html模板顯示引起的不良閃爍效應。

更多細節在這裏：http://docs.angularjs.org/api/ng/directive/ngCloak

用法：

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