angularjs - 在 View 进行ng-animate期间， "leaving" View 在动画中时， "entering" View 仍会占用空间

Question

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

这是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('!');

动画有效(即，我看到了动画效果)，并且 View 也发生了变化。

我遇到的问题是，在“进入” View 处于动画状态时，“离开” View 似乎仍在占用空间。

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

如何解决？预期的结果是平滑过渡且没有抖动，就像幻灯片1到3的ng-switch动画here一样。 (除了我当然使用ng-view。)

谢谢!

编辑:

我回想一下，“输入”动画运行时，“离开”动画尚未完全完成。

所以我想我的问题会有所改变。。但是预期的结果是相同的。如何实现平滑的“滑动”效果？

Answer 1

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

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

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