在对视图进行ng-animate动画期间，“离开"当“进入"视图时，视图仍然占据空间.视图在动画 [英] during ng-animate of views, "leaving" view still takes up space while "entering" view is animating in

问题描述

我正在使用AngularJS 1.1.5，并尝试使用daneden的animate.css进行ng-animate指令.我有一些使用路由设置的视图.我正在使用Twitter Bootstrap 3 RC1.

I'm using AngularJS 1.1.5 and trying out the ng-animate directive with daneden's animate.css. I have a couple of views set up using routing. I'm using Twitter Bootstrap 3 RC1.

以下是ng-view的代码:

Here is the code for the ng-view:

<div class="container" ng-view ng-animate="{enter:'animated fadeInRightBig', leave:'animated fadeOutLeft'}"></div>

这是路由部分:

$routeProvider
    .when('/', {
        templateUrl: '/Home/Home',
        title: 'Home'
    })
    .when('/Home/Home', {
        templateUrl: '/Home/Home',
        title: 'Home'
    })
    .when('/Home/About', {
        templateUrl: '/Home/About',
        title: 'About'
    })
    .otherwise({
        redirectTo: '/'
    });

    $locationProvider.html5Mode(false).hashPrefix('!');

动画有效(也就是说，我看到了动画效果)，并且视图也发生了变化.

The animation works (that is, I see the animation effects) and the view changes as well.

我遇到的麻烦是，在进入"视图处于动画状态时，离开"视图似乎仍在占用空间.

The thing I'm having trouble with is that the "leaving" view seems to be still taking up space while the "entering" view is animating in.

效果是，新视图的输入动画发生在离开视图先前占用的空间下方.好像旧视图仍然在那里，即使它已经动画化"了.一旦动画结束，新视图就会突然跳到正确的位置.我正在使用fadeInRightBig进行输入，并使用fadeOutLeft进行退出.

The effect is that the enter animation of the new view happens below the space previously taken up by the leaving view. It's as if the old view was still there, even though it has already "animated out". The new view then suddenly jerks up to the proper position once its animation finishes. I'm using fadeInRightBig for enter and fadeOutLeft for leave.

如何解决?预期的结果是平滑过渡而没有抖动，就像幻灯片1到3中ng-switch的动画一样

How can this be fixed? The expected result is a smooth transition with no jerking, like the animation for the ng-switch in slides 1 to 3 here. (Except that I'm using ng-view of course.)

谢谢！

我收回了，进入"动画运行时，离开"动画尚未完全完成.

I take it back, the 'leave' animation hasn't completely finished while the 'enter' animation is running.

所以我想我的问题会有所改变..但是预期的结果是相同的.如何实现平滑的滑动"效果?

So I guess my question will change a bit.. But the expected result is the same. How do I achieve the smooth "sliding" effect?

推荐答案

我刚开始时遇到了同样的问题.要获得平滑效果，只需更改CSS的计时.进入animate.css文件，查找您需要延迟的文件(在您的情况下，它将是fadeInRightBig.更改延迟(或向其添加大约1或2秒的延迟).

I had the same issue when I first started. To achieve the smooth effect simply change the timings of the CSS. Go into the animate.css file, look for the one the one you need to delay (in your case it would be fadeInRightBig. Change delay (or add a delay to it of about 1 or 2 seconds).

另一种选择是使退出动画的位置绝对.

Another alternative is to make the position of the exit animation absolute.

让我知道这是否有帮助.它为我工作.我希望angularjs已经为我们解决了这个问题.也许下一版将为我们解决这些问题.

Let me know if this helps. It worked for me. I wish that angularjs already handled this for us. Maybe the next version will solve these issues for us.

这篇关于在对视图进行ng-animate动画期间，“离开"当“进入"视图时，视图仍然占据空间.视图在动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！