我如何使用NG-动画与用户界面视图，而不是NG-看法？ [英] How can I use ng-animate with ui-view rather than ng-view?

问题描述

我采用了棱角分明的UI-路由器angularJS V1.2，并希望实现自定义页面过渡。结果
我如何使用NG-动画与UI的视图（从角UI路由器），而不是NG-视图（这将是标准的方式）？请参见修复动画在AngularJS 1.2 对NG-视图引用

I am using angular-ui-router with angularJS v1.2 and would like to implement custom page transitions.
How can I use ng-animate with ui-view (from angular-ui-router) rather than ng-view (which would be the standard way)? See Remastered Animation in AngularJS 1.2 for reference on ng-view.

编辑：
我已经尝试了两个不同版本的角度：V1.2.0-rc.2并在评论中建议V1.2.0-rc.3，但也似乎做的伎俩。我想我可能是做错了什么？

I have tried two different versions of angular: v1.2.0-rc.2 and v1.2.0-rc.3 as suggested in the comments, but neither seems to do the trick. I guess I might be doing something wrong?

下面是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;
}

我添加pviously提到的例子中，$ P $的的jsfiddle 。这将是不错的扩展这个例子，涵盖NG-视图和UI的观点，但我不知道怎么去纳克/ UI的视图和谐音成的jsfiddle，虽然。

I added a JSfiddle of the previously mentioned example. It would be nice to expand this example to cover ng-view and ui-view, but I'm not sure how to get ng/ui-view and the partials into JSfiddle, though.

推荐答案

该漏洞现在已经关闭，他们已经在UI路由器<一增加了一个入口过href=\"https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-animate-ui-view-with-ng-animate\">Wiki.它还包括一个演示 Plunkr 。我将在这里复制code为例，以防万一网址将成为过时的。

The bug is now closed and they've added an entry over at the ui-router Wiki. It also includes a demo Plunkr. I will copy the code example here, just in case the URL would become outdated.

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);
}

这篇关于我如何使用NG-动画与用户界面视图，而不是NG-看法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！