在视图的 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 的动画 此处.(当然，除了我使用的是 ng-view.)

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