title: AngularJS animation flicker iOS
body: <p>I'm using a slide animation in my AngularJS app, code below.</p>
  
  <p>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.</p>
  
  <p>How can I remove this flicker?</p>
  
  <pre><code>  .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 */
  </code></pre>