如何使用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-view和ng-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; }
另一个例子使用bounceInDown和bounceOutDown ：
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-views或id的view名称 。
例如，如果这是你的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*/ }
祝你好运。
