9

我正在使用 AngularJS 1.1.5 并尝试使用 daneden 的 animate.css 的 ng-animate 指令。我有几个使用路由设置的视图。我正在使用 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('!');

动画有效（即，我看到了动画效果）并且视图也发生了变化。

我遇到的问题是“离开”视图似乎仍在占用空间，而“进入”视图正在动画。

效果是新视图的进入动画发生在离开视图先前占用的空间下方。就好像旧视图仍然存在，即使它已经“动画出来”了。一旦动画完成，新视图就会突然跳到正确的位置。我使用fadeInRightBig 进入，使用fadeOutLeft 离开。

如何解决这个问题？预期的结果是没有抖动的平滑过渡，就像幻灯片 1 到 3 中的 ng-switch 动画一样。（当然，我使用的是 ng-view。）

谢谢！

编辑：

我收回它，当“进入”动画正在运行时，“离开”动画还没有完全完成。

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

4

2 回答 2

5

当我第一次开始时，我遇到了同样的问题。要获得平滑的效果，只需更改 CSS 的时间。进入 animate.css 文件，查找您需要延迟的那个（在您的情况下，它将是 fadeInRightBig。更改延迟（或添加大约 1 或 2 秒的延迟）。

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

让我知道这是否有帮助。它对我有用。我希望 angularjs 已经为我们处理了这个问题。也许下一个版本会为我们解决这些问题。

于 2013-08-04T15:15:01.340 回答
1

解决这个问题的另一种常用方法是处理 z-index。ng-enter 通常必须低于 ng-leave。

于 2014-10-16T19:06:27.353 回答