angularjs – 如何使用ng-animate与ui-view而不是ng-view?
发布时间:2020-12-17 08:41:09 所属栏目:安全 来源:网络整理
导读:我使用angular-ui-router与angularJS v1.2,并希望实现自定义页面转换。 如何使用ng-animate与ui-view(从 angular-ui-router)而不是ng-view(这将是标准的方式)?有关ng-view的参考,请参见 Remastered Animation in AngularJS 1.2。 编辑: 我试过两个不同版
我使用angular-ui-router与angularJS v1.2,并希望实现自定义页面转换。
如何使用ng-animate与ui-view(从 angular-ui-router)而不是ng-view(这将是标准的方式)?有关ng-view的参考,请参见 Remastered Animation in AngularJS 1.2。 编辑: 这里是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和partials到JSfiddle。
该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); transform:scale3d(0.5,0.5); } [ui-view].ng-enter-active { opacity: 1; -webkit-transform:scale3d(1,1,1); -moz-transform:scale3d(1,1); transform:scale3d(1,1); } [ui-view].ng-leave { opacity: 1; -webkit-transform:translate3d(0,0); -moz-transform:translate3d(0,0); transform:translate3d(0,0); } [ui-view].ng-leave-active { opacity: 0; -webkit-transform:translate3d(100px,0); -moz-transform:translate3d(100px,0); transform:translate3d(100px,0); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- Angular,回调不会改变变量
- angularjs – Angular UI Bootstrap Modal – 如何防止多个
- 在Bash脚本中向Git提供密码
- Bootstrap3基础 list-inline 无序列表横向显示
- Scala开发人员应该了解Java和/或JVM?
- bash – stdout到file1,stderr到file2,都正确交错到stdout和
- vim – 如何为CoffeeScript生成ctags?
- scala – 如何使用`ssc.fileStream()`读取镶木地板文件?传
- angular – @ ngrx / store订阅商店的一部分,避免检测其他部
- 为什么不允许在UNIX / Linux中使用硬链接