AngularJS动画闪烁的iOS [英] AngularJS animation flicker iOS

问题描述

我使用的是幻灯片动画在我的AngularJS应用程序，code以下。

在过渡正在启动正在显示第二现有视图下分裂原未分析传入的看法。这将导致iOS7一个恼人的闪烁。<​​/ P>

我如何删除这个忽悠？

  .view-动画容器{
    位置：相对;
    宽度：100％;
  }  .view，动画{
    -webkit-背面能见度：隐藏;
  }  .view-animate.ng进入，.view-animate.ng休假{
    -webkit-过渡：所有立方贝塞尔（0.250，0.460，0.450，0.940）为0.3s;
    过渡：所有立方贝塞尔（0.250，0.460，0.450，0.940）为0.3s;    位置：绝对的;
    宽度：100％;
  }  .rtl .view-animate.ng进入{
    -webkit变换：translate3d（100％，0，0）;
    -webkit-过渡延迟：0.1秒;
    不透明度：0;
  }
  .rtl .view-animate.ng-enter.ng进入活跃{
    -webkit变换：translate3d（0，0，0）;
    不透明度：1;
  }
  .rtl .view-animate.ng-leave.ng休假活跃{
    -webkit变换：translate3d（-100％，0，0）;
    不透明度：0;
  }
  .ltr .view-animate.ng进入{
    -webkit变换：translate3d（-100％，0，0）;
    -webkit-过渡延迟：0.1秒;
    不透明度：0;
  }
  .ltr .view-animate.ng-enter.ng进入活跃{
    -webkit变换：translate3d（0，0，0）;
    不透明度：1;
  }
  .ltr .view-animate.ng-leave.ng休假活跃{
    -webkit变换：translate3d（100％，0，0）;
    不透明度：0;
  }
  / *查看动画结束* /
 

解决方案

闪烁似乎是由z-index的故障引起的。

添加以下的CSS，它应该是固定的：

  .view-animate.ng休假{
        的z-index：1054;
    }
    .view-animate.ng进入{
        的z-index：1053;
    }
 

但仍可以将刷新或初始加载还是出现闪烁。如果您在上$ routeChangeStart的rootscope app.run定义升/ RTL方向，我建议你prevent定义时，当前的路由未定义的一个方向。

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

解决方案

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'.

这篇关于AngularJS动画闪烁的iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！