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屋!