WIFI:
u: 8800Guest
p: 1Interactive
Animations
with
Danniel Condez
UI ENGINEER
https://github.com/ducondez
@nyelcondez
What if..
There's no Animation??
Maps app
io7 Calendar
CSS Transition
Primer
ngAnimate is...
.class-based
Animations happens as
classes come in an go
ng-show & ng-hide
is basically a toggle for
.ng-hide
display: none !important!
ngAnimate for
ngShow, ngHide, ngClass
source: yearofmoo.com
Example Sequence
0. <div ng-show="true" class="">
1. <div ng-show="false" class="">
2. <... class="ng-hide-add">
(added "ng-hide-add", to setup initial values before animating)
3. <... class="ng-hide ng-hide-add ng-hide-add-active ">
(added "ng-hide" and "ng-hide-add-active", to execute transition)
4. <... class="ng-hide">
Example Sequence
0. <div ng-class="{active:false}" class="">
1. <div ng-class="{active:true} class="">
2. <... class="active-add">
(added "myClass-add", to setup initial values before animating)
3. <... class=" active active-add active-add-active ">
(added "myClass" and "myClass-add-active", to execute transition)
4. <... class="myClass">
ngAnimate for
ngRepeat, ngView, ngInclude, ngIf
source: yearofmoo.com