Question

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

但我在不同页面之间的动画有问题。如果用户按下浏览器或历史记录的后退按钮，我希望它们从右侧飞入（并向左侧消失），反之亦然（从左侧飞入，向右消失）（）在JS代码中触发。

我该怎么做？

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

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

Answer 1

我设法找到了解决方案。您可以see it online或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（）时的动画不同

1 个答案: