AngularJS animation flicker iOS

问题

I'm using a slide animation in my AngularJS app, code below.

When a transition is being started the raw and unparsed incoming view is being displayed for a split second under the existing view. This causes an annoying flicker on iOS7.

How can I remove this flicker?

  .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 */

回答1:

The flicker seems to be caused by z-index glitch.

Add the following css and it should be fixed:

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

It is still possible a flicker will still occur on refresh or the initial load. If you are defining ltr / rtl direction in app.run in the rootscope on $routeChangeStart, I suggest you prevent defining a direction when your current route is 'undefined'.

回答2:

What you are looking for is the ngCloak directive.

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

More details here : http://docs.angularjs.org/api/ng/directive/ngCloak

Usage :

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

来源：https://stackoverflow.com/questions/22372874/angularjs-animation-flicker-ios

标签

angularjs

ios7