2

我创建了一个基于 AngularJS 的网站。每个页面都有自己的模板和控制器，并包含ng-view在主布局中。

但是我对不同页面之间的动画有疑问。如果向前导航，我希望它们从右侧飞入（并向左侧消失），反之亦然（从左侧飞入，向右消失），当用户点击浏览器或 history.back 的后退按钮时() 在 JS 代码中触发。

我该怎么做呢？

我已经设法通过将动画分配给类ng-enter和来定义动画ng-leave，但是当按下后退按钮时它们不会改变，即最后一页从右侧进入而不是从左侧进入。

我还尝试将向后动画定义为默认动画，并ng-view在我想向前导航以使用正确的动画时动态更改元素的类，但是要重置这个临时类，我（认为我）必须使用在 X 毫秒后（动画完成时）简单地重置它的计时器。不幸的是，当用户快速/在前进动画期间按下返回时，这会导致错误。

4

1 回答 1

1

我设法找到了解决方案。你可以在网上看到，或者阅读代码

基本思想是这样的：

  • 后退动画是默认动画
  • 每当我们想要动画前进时，这是通过一个特殊的函数来完成的，它改变容器的类名，所以使用 forwards-animation
  • 一旦从 DOM 中删除旧页面，此更改就会撤消

最后一步很重要：不要使用计时器或类似的东西。当在前进动画期间按下浏览器的后退按钮时，计时器不会注意到这一点，并且类名的更改不会撤消。
但是当按下按钮时，旧页面并没有完成它的动画，它会立即从 DOM 中删除，这会触发将类名更改回来的代码。

代码中最重要的部分：

使用此函数使用前进动画更改当前页面：

function animateForwards(callback) {
    $('#container').addClass("animation-forwards");
    $('#container').removeClass("animation-backwards");
    callback();
}

animateForwards(function () { $location.path("/newPage"); });

一旦从 DOM 中删除旧页面，此函数将撤消类名的更改：

$("#container").bind(
  "DOMNodeRemoved",
  function(objEvent) {
    // Append event to log display.
    if ($(objEvent.target).hasClass('page')) {
      $('#container').removeClass("animation-forwards");
      $('#container').addClass("animation-backwards");
    }
  }
);
于 2015-01-24T15:53:24.170 回答