Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Ember js meetup treviso liquid-fire

Ember js meetup treviso liquid-fire

Herunterladen, um offline zu lesen

A gently introduction to animations in ember.js using liquid-fire.

The talk was part of the Ember.js Meetup Treviso

A gently introduction to animations in ember.js using liquid-fire.

The talk was part of the Ember.js Meetup Treviso

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ember js meetup treviso liquid-fire

  1. 1. LIQUID FIRE TOOLKIT AN INTRODUCTION TO ANIMATIONS IN EMBER By William Bergamo / @bugduino
  2. 2. LIQUID FIRE Ember-cli addon made by Manage animations and transitions It includes some default animations and helpers Under the hood uses ef4 Velocity.js
  3. 3. KEY IDEA Transitions should be implemented in views. But who is in charge to decide what kind of transition to use?
  4. 4. TRANSITION MAP e x p o r t d e f a u l t f u n c t i o n ( ) { t h i s . t r a n s i t i o n ( t h i s . f r o m R o u t e ( ' b a r ' ) , t h i s . t o R o u t e ( ' f o o ' ) , t h i s . u s e ( ' t o L e f t ' ) , t h i s . r e v e r s e ( ' t o R i g h t ' ) ) ; t h i s . t r a n s i t i o n ( t h i s . f r o m R o u t e ( ' b a z ' ) , t h i s . u s e ( ' t o U p ' ) , ) ; / / . . . } Contains rules about how app pieces relate to each other Similar to The Ember router map
  5. 5. LIQUID FIRE COMPONENTS Template helpers Transition map Transitions
  6. 6. TEMPLATE HELPERS {{liquid-outlet}} {{liquid-with}} {{liquid-bind}} {{liquid-if}} / {{liquid-unless}} {{liquid-spacer}}
  7. 7. HELPERS COMMON BEHAVIOR Generate some DOM elements They consult the transition map use, class and growDuration options < d i v c l a s s = " l i q u i d - c o n t a i n e r " > < d i v c l a s s = " l i q u i d - c h i l d " > / / C o n t e n t < / d i v > < / d i v >
  8. 8. LIQUID OUTLET Animates between routes transition LIQUID WITH Animates the transition between different models on the same route LIQUID BIND {{liquid-bind someProp}} it's the equivalent of {{someProp}}, the helper animates between value changes
  9. 9. LIQUID IF Works like the normal ember IF helper and animates when the value changes from true to false or the opposite LIQUID SPACER Do not have an equivalent Ember helper Do not search in transition map for matching rules It just animates it's own width and height changes
  10. 10. TRANSITION MAP You can configure rules that govern which animations run at any given moment. The map must be located in app/transitions.js It gives access to functions: transition creates a transition rule with one or more constraints and a use statement. setDefault is used to provide default setting to Velocity.js (e.g duration, easing, etc.)
  11. 11. CREATE RULES FOR ROUTES fromRoute, toRoute, withinRoute are available for the liquid-outlet Possible parameters: route name, functions, array, null t h i s . t r a n s i t i o n ( t h i s . f r o m R o u t e ( ' b a r ' ) , t o R o u t e ( ' f o o ' ) , t h i s . u s e ( ' t o L e f t ' ) ) ; t h i s . t r a n s i t i o n ( t h i s . f r o m R o u t e ( r o u t e N a m e = > r o u t e N a m e . i n c l u d e s ( ' o o ' ) ) , t h i s . u s e ( ' t o L e f t ' ) ) ; t h i s . t r a n s i t i o n ( t h i s . f r o m R o u t e ( [ ' f o o ' , ' b a r ' , r o u t e N a m e = > r o u t e N a m e = = = ' b a z ' ] ) , t h i s . u s e ( ' t o D o w n ' ) ) ; t h i s . t r a n s i t i o n ( t h i s . f r o m R o u t e ( n u l l ) , t h i s . t o R o u t e ( ' b a r ' ) , t h i s . u s e ( ' t o U p ' ) ) ;
  12. 12. CREATE RULES FOR MODELS fromModel toModel betweenModel Possible parameters: same as before. CREATE RULES FOR VALUES fromValue toValue betweenValues They accept only one parameter: function, regexp, boolean, string, number or null (which will match null or undefined)
  13. 13. hasClass CREATE RULES FOR DOM < d i v i d = " c o n t a i n e r " > { { l i q u i d - i f i s O p e n c l a s s = " s p a c e r " } } o p e n { { / l i q u i d - i f } } < / d i v > t h i s . t r a n s i t i o n ( t h i s . h a s C l a s s ( ' s p a c e r ' ) , t h i s . u s e ( ' t o D o w n ' ) ) matchSelector t h i s . t r a n s i t i o n ( t h i s . m a t c h S e l e c t o r ( ' . s p a c e r ' ) , t h i s . u s e ( ' t o D o w n ' ) ) childOf t h i s . t r a n s i t i o n ( t h i s . c h i l d O f ( ' # c o n t a i n e r ' ) , t h i s . u s e ( ' t o D o w n ' ) ) inHelper t h i s . t r a n s i t i o n ( t h i s . i n H e l p e r ( ' l i q u i d - i f ' ) , t h i s . u s e ( ' t o D o w n ' ) )
  14. 14. TRANSITIONS implement animation between two states, manipulate the DOM to pass from the old view's value to the new one. PREDEFINED toLeft, toRight, toDown, toUp fade, crossFade explode fly-to
  15. 15. EXPLODE You can animate every single piece of the template. It accepts any number of objects as argument, and every object must have a use property. t h i s . t r a n s i t i o n ( t h i s . c h i l d O f ( ' # c o n t a i n e r ' ) , t h i s . u s e ( ' e x p l o d e ' , { p i c k N e w : ' . s p a c e r ' , u s e : ' t o D o w n ' } , { p i c k N e w : ' . b r e a d c r u m b s ' , u s e : ' t o L e f t ' } , { / / f o r a l l o t h e r e l e m e n t s u s e : ' f a d e ' } }
  16. 16. CUSTOM TRANSITIONS Must be located in app/transitions/transition-name.js There are different animation primitives available i m p o r t { s t o p , a n i m a t e , P r o m i s e } f r o m " l i q u i d - f i r e " ; e x p o r t d e f a u l t f u n c t i o n r o t a t e B e l o w ( o p t s = { } ) { v a r d i r e c t i o n = 1 ; i f ( o p t s . d i r e c t i o n = = = ' c w ' ) { d i r e c t i o n = - 1 ; } s t o p ( t h i s . o l d E l e m e n t ) ; i f ( t h i s . o l d E l e m e n t ) { t h i s . o l d E l e m e n t . c s s ( ' t r a n s f o r m - o r i g i n ' , ' 5 0 % 1 5 0 % ' ) ; } i f ( t h i s . n e w E l e m e n t ) { t h i s . n e w E l e m e n t . c s s ( ' t r a n s f o r m - o r i g i n ' , ' 5 0 % 1 5 0 % ' ) ; } r e t u r n P r o m i s e . a l l ( [ a n i m a t e ( t h i s . o l d E l e m e n t , { r o t a t e Z : - 9 0 * d i r e c t i o n + ' d e g ' } , o p t s ) , a n i m a t e ( t h i s . n e w E l e m e n t , { r o t a t e Z : [ ' 0 d e g ' , 9 0 * d i r e c t i o n + ' d e g ' ] } , o p t s )
  17. 17. PROBLEMS ENCOUNTERED Not all feature are available in oldStable branch overflow: hidden 'hidden' features -> liquid-animating Bug with position: fixed and chrome PR#209 Issue#197 Quick fixes . l i q u i d - c o n t a i n e r . l i q u i d - a n i m a t i n g { o v e r f l o w : h i d d e n ; } . l i q u i d - c o n t a i n e r > . l i q u i d - c h i l d , . l i q u i d - c o n t a i n e r { t r a n s f o r m : i n i t i a l ; o v e r f l o w : i n i t i a l ; }
  18. 18. EXAMPLES
  19. 19. Contacts: THANK YOU! @bugduino www.pitchtarget.com http://hackatron.org/ Ember.js Treviso Meetup

×