如何将 ng-animate 与 ui-view 而不是 ng-view 一起使用? [英] How can I use ng-animate with ui-view rather than ng-view?
问题描述
我正在使用 angular-ui-router 和 angularJS v1.2,并希望实现自定义页面转换.
如何将 ng-animate 与 ui-view 一起使用(来自 angular-ui-router)而不是 ng-view(这将是标准方式)?有关 ng-view 的参考,请参阅 AngularJS 1.2 中的重制动画.
我尝试了两种不同版本的 angular:如评论中所建议的 v1.2.0-rc.2 和 v1.2.0-rc.3,但似乎都没有成功.我想我可能做错了什么?
这是 HTML:
和 CSS:
.slide {宽度:1024px;高度:768px;}.slide.ng-输入,.slide.ng-离开{-webkit-transition:0.5s 线性全部;-moz-transition:0.5s 线性全部;-o-transition:0.5s 线性全部;过渡:0.5s线性全部;边框:1px纯蓝色;}.slide.ng-enter.ng-enter-active {边框:1px纯红色;}
我添加了前面提到的示例的 JSfiddle.扩展此示例以涵盖 ng-view 和 ui-view 会很好,但是我不确定如何将 ng/ui-view 和部分内容放入 JSfiddle.
该错误现已关闭,他们已在 ui-router 上添加了一个条目 Wiki.它还包括一个演示 Plunkr.我将在此处复制代码示例,以防 URL 过时.
HTML:
<div class="span12 ui-view-container"><div class="well" ui-view></div>
CSS:
/* 必须在 ui-view 上显式设置高度防止动画期间折叠*/.well[ui-view]{高度:65px;}.ui-view-container {位置:相对;}[ui-view].ng-enter, [ui-view].ng-leave {位置:绝对;左:0;右:0;-webkit-transition:所有 .5s 缓入缓出;-moz-transition:所有 .5s 缓入缓出;-o-transition:所有 .5 秒的缓入缓出;过渡:所有 0.5 秒的缓入缓出;}[ui-view].ng-enter {不透明度:0;-webkit-transform:scale3d(0.5, 0.5, 0.5);-moz-transform:scale3d(0.5, 0.5, 0.5);变换:scale3d(0.5, 0.5, 0.5);}[ui-view].ng-enter-active {不透明度:1;-webkit-transform:scale3d(1, 1, 1);-moz-transform:scale3d(1, 1, 1);变换:scale3d(1, 1, 1);}[ui-view].ng-leave {不透明度:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);变换:translate3d(0, 0, 0);}[ui-view].ng-leave-active {不透明度:0;-webkit-transform:translate3d(100px, 0, 0);-moz-transform:translate3d(100px, 0, 0);变换:translate3d(100px, 0, 0);}
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.
EDIT: 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?
Here is the HTML:
<div ui-view class="slide"></div>
and the 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;
}
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.
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-animate 与 ui-view 而不是 ng-view 一起使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!