AngularJS-Learning ui-router angular-transitions

zyip發表於2015-04-01
AngularJSUI

 

 https://github.com/mgechev/AngularJS-Learning

 

https://github.com/angular-ui/ui-router

 

 

https://github.com/mgechev/angular-transitions

 

http://daneden.github.io/animate.css/

 

http://plnkr.co/edit/?p=preview

 

https://divshot.com/blog/tips-and-tricks/angular-1-2-and-animate-css/

 

https://divshot.com/blog/tips-and-tricks/angular-1-2-and-animate-css/

https://github.com/mgechev/angular-transitions/blob/master/css/view/1.2.0/animations.css

 

 指定動畫樣式1

<div ui-view ng-animate="{enter: 'at-view-slide-in-top',leave: 'at-view-slide-out-top'}" class="main-wrapper" style="border:1px green solid; margin-top:6px; margin-bottom:6px; padding-top:2px; padding-bottom:2px;">

 

指定動畫樣式2

<style type="text/css">
.slide.ng-enter, .slide.ng-leave {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
}

.slide.ng-enter { }        /* starting animations for enter */
.slide.ng-enter.ng-enter-active { } /* terminal animations for enter */
.slide.ng-leave { }        /* starting animations for leave */
.slide.ng-leave.ng-leave-active { } /* terminal animations for leave */
</style>

<!--
the animate service will automatically add .ng-enter and .ng-leave to the element
to trigger the CSS transition/animations
-->
<ANY class="slide" ng-include="..."></ANY>

 

相關文章