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

Question

我正在使用带有angularJS v1.2的angular-ui-router，并希望实现自定义页面转换。

如何将ng-animate与ui-view (来自angular-ui-router)一起使用，而不是ng-view (这将是标准方式)？有关ng-view的参考，请参阅Remastered Animation in AngularJS 1.2。

编辑:我已经尝试了两个不同版本的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

bug现在被关闭了，他们在ui路由器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 Router 0.2.8修复了这个问题。我使用的是AngularJS v1.2.7。

例如，只需将"slide“类添加到您的ui-view

<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，一些动画似乎有一些奇怪的行为。我通过将autoscroll="false“添加到我的ui-view元素来解决这个问题。

Answer 3

上周末，我创建了两个演示ui-view和ng-view视图动画的plunks

ui-view：http://plnkr.co/edit/jpebBk?p=preview

ng-view：http://plnkr.co/edit/LQhVYU?p=preview

angular-ui-router 0.2.8提供了对主要视图动画错误的修复