如何在ui-view而不是ng-view中使用ng-animate？

Question

我正在使用angular-ui-router与angularJS v1.2,并希望实现自定义页面转换.
如何在ui-view(来自angular-ui-router)而不是ng-view(这将是标准方式)中使用ng-animate ？有关ng-view的参考,请参阅AngularJS 1.2中的Remastered Animation.

编辑:我已经尝试了两个不同版本的角度:v1.2.0-rc.2和v1.2.0-rc.3,如评论中所建议的那样,但似乎都没有.我想我可能做错了什么？

这是HTML:

<div ui-view class="slide"></div>

和CSS:

.slide {
    width:1024px;
    height:768px;
}
.slide.ng-enter,
.slide.ng-leave {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    border: 1px solid blue;
}

.slide.ng-enter.ng-enter-active {
    border: 1px solid red;
}

我添加了前面提到的示例的JSfiddle.将这个例子展开来覆盖ng-view和ui-view会很好,但我不知道如何将ng/ui-view和部分内容放到JSfiddle中.

Answer 1

该错误现已关闭,他们在ui-router Wiki上添加了一个条目.它还包括一个演示Plunkr.我将在这里复制代码示例,以防万一URL过时.

HTML:

<div class="row">
   <div class="span12 ui-view-container">
      <div class="well" ui-view></div>        
   </div>
</div> 

CSS:

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.well[ui-view]{
 height: 65px; 
}

.ui-view-container {
  position: relative;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  opacity: 0;
  -webkit-transform:scale3d(0.5, 0.5, 0.5);
  -moz-transform:scale3d(0.5, 0.5, 0.5);
  transform:scale3d(0.5, 0.5, 0.5);
}

[ui-view].ng-enter-active {
  opacity: 1;
  -webkit-transform:scale3d(1, 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
}

[ui-view].ng-leave {
  opacity: 1; 
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  opacity: 0;
  -webkit-transform:translate3d(100px, 0, 0);
  -moz-transform:translate3d(100px, 0, 0);
  transform:translate3d(100px, 0, 0);
}

Answer 2

看起来这是用UI路由器0.2.8修复的.我正在使用AngularJS v1.2.7.

例如,只需将"幻灯片"类添加到您的ui视图中

<div ui-view class="slide">

并使用以下css为您的动画.

.slide {
    -webkit-transition: -webkit-transform .7s ease-in-out;
    -moz-transition: -moz-transform .7s ease-in-out;
    -o-transition: -o-transform .7s ease-in-out;
    transition: transform .7s ease-in-out;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide.ng-enter {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.slide.ng-enter.ng-enter-active, .slide.ng-leave {
    position: absolute;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide.ng-leave.ng-leave-active {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

此外,由于$ uiViewScroll,一些动画似乎有一些奇怪的行为.我通过向我的ui-view元素添加autoscroll ="false"来解决这个问题.

Answer 3

就像帖子里有人说的。路由器有一个 Angular 1.2 分支，其中包含使其工作的补丁。我知道使用 Angular 1.2.6 ng-animate 1.2.6 和我的 0.2.0 beta 分支 1.2 的特殊 ui-router 版本可以工作......淡出 ui-views.. 进出。

问题是你需要“构建”beta分支角度路由器..你不能只从git下载一个tarball并且它可以工作..你必须下载它。然后构建它。然后你将拥有一个自定义的 ui-router。查看 javascript 中的 ui-router 标头。我的说这个..

/**
 * State-based routing for AngularJS
 * @version v0.2.0-dev-2013-10-05
 * @link http://angular-ui.github.com/
 * @license MIT License, http://www.opensource.org/licenses/MIT
 */

你说的是版本0.2.0-dev-2013-10-05吗？那个日期是我编译我的日期。所以你的日期应该与你的日期相关..如果你没有在你的javascript标题中看到它，那么你只是使用与master相同的0.2.0版本，你没有使用任何特殊的东西来使1.2动画工作...

这是已编译的 ui-router 的一个过去的 bin，可与 1.2 一起使用，尝试一下。繁荣！

0.2.0 Angular-ui-router 自定义构建