angularjs - 如何将 ng-animate 与 ui-view 而不是 ng-view 一起使用？

Question

我正在使用 angular-ui-router 和 angularJS v1.2，并希望实现自定义页面转换。
我如何将 ng-animate 与 ui-view (来自 angular-ui-router )而不是 ng-view (这将是标准方式)一起使用？见 Remastered Animation in AngularJS 1.2供 ng-view 引用。

编辑:
我尝试了两个不同版本的 angular: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);
}