如何使用ui-view而不是ng-view使用ng-animate?

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

编辑:我已经尝试了两个不同的angular度版本:v1.2.0-rc.2和v1.2.0-rc.3build议在评论中,但似乎都没有把戏。 我想我可能会做错什么?

这里是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 。 尽pipe如此,将这个示例展开来覆盖ng-view和ui-view会很好,但是我不确定如何获取ng / ui-view和部分到JSfiddle。

这个bug现在已经closures,他们在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); } 

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

例如,只需将“幻灯片”类添加到您的UI视图

 <div ui-view class="slide"> 

并使用下面的CSS为您的animation。

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

在周末,我创build了两个展示ui-viewng-view视图animation

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

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

angular-ui-router 0.2.8带有修复主要视图animation的bug

我刚刚发布了一个使用ngAnimate(1.4.8)与UI路由器的演示教程 。

它显示了几个不同的视图animation,主视图中的淡入淡出以及嵌套视图中的幻灯片input/输出转换。

以下是主视图中淡入转换的LESS文件的片段:

 main { /* start 'enter' transition */ &.ng-enter { /* transition on enter for .5s */ transition: .5s; /* start with opacity 0 (invisible) */ opacity: 0; } /* end 'enter' transition */ &.ng-enter-active { /* end with opacity 1 (fade in) */ opacity: 1; } } 

就像有人在post中说的那样。 路由器有一个angular度为1.2的分支,它具有使其工作的补丁。 我知道一个事实,即使用Angular 1.2.6 ng-animate 1.2.6和我的0.2.0 beta分支1.2的特殊ui-router版本工作…衰退ui-views ..进出。

问题是,你需要“build立”testing分支angular路由器..你不能只从git下载tarball,它的工作..你必须下载它。 然后build立它。 那么你将有一个自定义的UI路由器。 看看你的UI路由器头在JavaScript中。 我说这个..

 /** * 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? 那个date是我编译的date。 所以你的date应该与你的date相关..如果你没有看到你的JavaScript的头,那么你只是使用相同的0.2.0版本的主人,你没有使用任何特殊的东西,使1.2animation工作…

这里是一个编译的UI路由器的工作与1.2尝试了。 繁荣!

0.2.0 Angular-ui路由器自定义构build

如果有人想在Angular和UI-Router上使用animate.css ,可以简单地在下面做。 注意这只是使用Angular 1.2.21和UI-Router 0.2.10进行testing。

使用FadeInDown作为inputanimation和FadeOutDown作为退出animation的示例 。 只需从animate.css中交换animation名称即可。 你也可以把它放在一个div容器中,把position设置为relative。

HTML:

 <div data-ui-view class="fade"></div> 

CSS:

 .fade.ng-enter, .fade.ng-leave { position: absolute; -webkit-animation-duration: 1s; animation-duration: 1s; } .fade.ng-enter { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .fade.ng-leave { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } 

另一个例子使用bounceInDownbounceOutDown

HTML:

 <div data-ui-view class="bounce"></div> 

CSS:

 .bounce.ng-enter, .bounce.ng-leave { position: absolute; -webkit-animation-duration: 1s; animation-duration: 1s; } .bounce.ng-enter { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } .bounce.ng-leave { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } 

编辑:@ kamweti的Plunker的叉子,以animate.css可视化示例。

使用AngularMotion https://github.com/mgcrea/angular-motion然后只需将其添加到您的CSS

 div[ng-view].ng-leave-active { display: none !important; } 

把你的animation添加到你的ng-view div的类(在我的情况下am-fade

避免该元素的named-viewsidview名称

例如,如果这是你的html

 <div id="home-page" ui-view="home"> <!-- THIS IS WHERE YOUR TEMPLATE WILL BE LOADED --> </div> 

代替:

 /*AVOID*/ div#home-page[ui-view="home"].ng-enter { /*ENTER STYLES*/ } div#home-page[ui-view="home"].ng-enter-active { /*...ENTER-ACTIVE-STYLES*/ } 

尝试:

 div[ui-view].ng-enter { /*...ENTER-STYLES*/ } div[ui-view].ng-enter-active { /*...ENTER-ACTIVE-STYLES*/ } 

祝你好运。