NG-动画：有条件地转换＆QUOT;返回]过渡（BUG？） [英] ng-animate : conditionally switching "back" transition (BUG?)

问题描述

大家好，

谷歌组和小提琴和博文从那里联系，我设法页面转换与NG-动画工作。

这里的我的小提琴

 小提琴是很好的评论，请让我知道如果有什么不清楚
 

通过在NG-认为我是能够触发不同的CSS-转换为每个视图改变设置transitionClass（两者.LR或.RL）。

现在，我想做的事，是手动或由应用程序中的链接，浏览器的后退按钮更改视图退一步，不管这一步是否回造成的情况下，把一个背过渡。

要做到这一点，app.run（），我在听为$ locationChangeStart，保存当前的URL蛞蝓和再随后$ locationChangeStart检查对，以确定我们是否要回到一个页面中。如果是这样的情况下，背过渡使用。

此工程pretty很好，除了...

进入该页面（。第输入，。第进入活跃）被转变为预期的，而离开页面（。第-离开，。第休假活性）似乎停留在previously用于过渡。

我预计，创下了transitionClassLR的NG-认为，这两个页面，进入和离开时，使用'.LR页面输入的CSS过渡和LR页面休假。

好像什么，而不是发生：如果transitionClass是'ANY'前，NG-动画将用于进入页面和.ANY页面休假对于离开页面.LR页面输入

再现'臭虫'：

应用程序启动上的页面1.从1到2.转到现在去从2到3，这种转变被打破了。去从3到1，作品如预期这种转变。的这两个转变是RL（从右到左），所以他们应该看起来是一样的。的是第2页唯一的区别进入LR，而第3页进入RL。所以，实际上，第1页将使用2改变为3时最初为3页面设置。进入活跃的过渡。

这是预期的行为？

我majorly confuzzled的权利，但只能用角工作的最后一个星期左右，NG-动画是相对较新的功能，我很可能会失去了一些东西。因此，报告bug或任何东西之前，我希望能有这方面的投入。

谢谢！

解决方案

好了，根据我pretty确定要进入的页面，也决定退出动画应用到传出页面的评论。所以，你真的需要你的$ locationChange code。

它也像你所看到的问题是，你的父母单独设置一类传入的页面上，但没有什么可保留的动画等待发生此类变化。

在简单的解决办法似乎是使NG-动画取决​​于不断变化的变量来确定动画类名称：

 ＆LT; NG-视图NG-动画=transitionClass＆GT;＆LT; / NG-视图＆gt;
 

那么CSS选择器崩溃只是为单一的类：

  .LR进入活跃{
  ...
}
 

（其中transitionClass仍在于$ rootScope在locationChangeStart设置：）

  $ rootScope。在（$ locationChangeStart功能（事件，接下来，电流）{$
 ...
 

http://jsfiddle.net/9XPVX/4/

Hi everyone,

reading through this google group and the fiddles and blogpost linked from there, I managed to get page transitions working with ng-animate.

Here's my Fiddle

the fiddle is nicely commented, please let me know if anything's unclear

By setting a 'transitionClass' (either .LR or .RL) on the ng-view I was able to trigger different css-transitions for every view change.

Now, what I want to do, is manually applying a "back" transition in case of changing the view one step back, no matter whether that step back is caused by a link within the app or the browser's back button.

To do so, within app.run(), I'm listening for $locationChangeStart, saving the current url slug and then checking against it on the next $locationChangeStart to determine whether we're going back one page. If that's the case, the "back" transition is applied.

This works pretty well, except for...

The entering page (.page-enter, .page-enter-active) is transitioning as expected, while the leaving page (.page-leave, .page-leave-active) seems to be stuck on the previously used transition.

I'd expect, setting a transitionClass 'LR' on the ng-view, that both pages, entering and leaving, use the css transition for '.LR page-enter' and 'LR page-leave'.

What seems to happen instead: If the transitionClass was 'ANY' before, the ng-animate will use '.LR page-enter' for the entering page and '.ANY page-leave' for the leaving page.

Reproducing the 'bug':

App starts on Page 1. Go from 1 to 2. Now go from 2 to 3, this transition is broken. Go from 3 to 1, this transition works as expected. Both transitions are 'RL' (Right To Left), so they should look the same. The only difference being that page 2 enters 'LR' while page 3 enters 'RL'. So, actually, page 1 will use the '.enter-active' transition that was originally set for page 3 when changing from 2 to 3.

Is this the expected behavior?

I'm majorly confuzzled right now, but only working with angular for the last week or so and ng-animate being relatively new feature I might very well be missing something. So before reporting a bug or anything I'd welcome any input on this.

Thanks!

解决方案

Ok, so based on the comments I'm pretty sure you want the incoming page to also determine exit animations to apply to the outgoing page. So you really need your $locationChange code.

It also looks like the problem you are seeing is that you are setting a class on the parent independently on the incoming page but there is nothing to keep the animations waiting for this class change to occur.

The simplest fix seems to be to make the ng-animate depend on your changing variable to determine the animation class names:

<ng-view ng-animate="transitionClass"></ng-view>

then the CSS selectors just collapse into single classes:

.LR-enter-active {
  ...
}

(where transitionClass is still being set on the $rootScope in the locationChangeStart:)

 $rootScope.$on("$locationChangeStart", function (event, next, current) {
 ...

http://jsfiddle.net/9XPVX/4/

这篇关于NG-动画：有条件地转换＆QUOT;返回]过渡（BUG？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！