使用 history.back() 时的不同动画

Question

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

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

我该怎么做？

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

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

Answer 1

我设法找到了解决方案。你可以see it online, or read the code

基本思路是这样的：

后退动画为默认动画
每当我们想要为前进设置动画时，这是通过一个更改容器类名的特殊函数来完成的，因此使用了前进动画
从 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");
    }
  }
);

使用 history.back() 时的不同动画

Different animation when history.back() ist used

back

angularjs

angularjs-animation

angularjs-view