An introduction to designing CSS transitions using AngularJS

An introduction to designing CSS transitions using AngularJS

I gave this talk at a Sass meetup called The Mixin, in San Francisco, Thursday April 17th.

I show examples of how a UI designer without much JS or AngularJS experience can use some of the features built in to AngularJS (with angular-animate) to help them design interactive components and add CSS transitions.

The Plunker examples used in the slides are:

http://www.tinyurl.com/angular-animate (ng-if)
http://www.tinyurl.com/slide-out-animation (ng-show)
http://plnkr.co/edit/gwh3wA?p=preview (ng-show, ng-model, ng-pluralize)

755c2a9445eec2d2451804f43bc34654?s=128

jessicaspacekat

April 16, 2014
Tweet

Transcript

  1. 5.
  2. 8.

    $( "#target" ).click(function() { $( "#another-target" ).addClass( "expanded" ); });

    JavaScript <div id=”another-target”> ... stuff ... </div> <button id=”target”>Add or remove servers</button>
  3. 10.
  4. 16.
  5. 18.
  6. 19.

    Set up a AngularJS sandbox to design a component. I’ll

    use Plunker Plnkr.co I’LL DEMONSTRATE
  7. 20.

    From plnkr.co click “Editor” SETTING UP A SANDBOX Use a

    template in the drop down tinyurl.com/angular-animate
  8. 23.
  9. 24.

    Define ng-app & ng-controller in the HTML <html ng-app="plunker"> &

    <body ng-controller="MainCtrl"> ! Add ngAnimate & define the controller in app.js var app = angular.module('plunker', ["ngAnimate"]); ! app.controller('MainCtrl', function($scope) {}); HOOKING UP THE ANGULAR ISH Details on what this stuff does is on the AngularJS homepage angularjs.org
  10. 26.

    <div ng-if="showCat" class="cat"> Here’s a cat! </div> CONDITIONALLY DISPLAY DOM

    ELEMENTS WITH ng-if This DIV would only be rendered if “showCat” evaluated to “true”
  11. 27.

    <button ng-click="showCat=true"> show the cat </button> TOGGLE TRUE/FALSE WITH ng-click

    <button ng-click="showCat=false"> hide the cat </button>
  12. 28.

    Hint: Watch a variable in the UI by putting it

    in double curly braces: <p>showCat is: {{ showCat }}.</p>
  13. 29.
  14. 30.
  15. 31.

    NOW THE BASIC SHOW & HIDE BEHAVIORS ARE SET UP.

    ! LET’S ADD SOME ANIMATION USING CSS TRANSITIONS.
  16. 34.

    <div ng-if="showCat" class="cat"> Here’s a cat! </div> WHEN ng-if BECOMES

    TRUE FALSE TRUE .ng-enter .ng-enter .ng-enter-active
  17. 35.

    <div ng-if="showCat" class="cat"> Here’s a cat! </div> WHEN ng-if BECOMES

    TRUE FALSE TRUE .ng-enter .ng-enter .ng-enter-active *poof*
  18. 36.

    // the "ng-if true" transition starting point .cat.ng-enter { transition:

    0.5s ease all; left: -300px; opacity: 0; } ! // the "ng-if true" transition ending point .cat.ng-enter.ng-enter-active { left: 0px; opacity:1; }
  19. 37.
  20. 38.
  21. 41.

    TRUE FALSE .ng-leave .ng-leave .ng-leave-active WHEN ng-if BECOMES FALSE <div

    ng-if="showCat" class="cat"> Here’s a cat! </div>
  22. 42.

    TRUE FALSE .ng-leave .ng-leave .ng-leave-active *poof* WHEN ng-if BECOMES FALSE

    <div ng-if="showCat" class="cat"> Here’s a cat! </div>
  23. 43.

    TRUE FALSE .ng-leave .ng-leave .ng-leave-active *poof* WHEN ng-if BECOMES FALSE

    <div ng-if="showCat" class="cat"> Here’s a cat! </div> (Also bye-bye DOM element)
  24. 44.

    // the "ng-if false" transition starting point .cat.ng-leave { -webkit-transition:

    0.5s ease all; transition: 0.5s ease all; left: 0px; opacity: 1; } ! // the "ng-if false" transition ending point .cat.ng-leave.ng-leave-active { left: 700px; opacity: 0; }
  25. 45.

    CHEATSHEET ng-if CLASS WATERFALL FALSE ! ! TRUE ! !

    FALSE .ng-enter .ng-enter.ng-enter-active *poof* (default styling) .ng-leave .ng-leave.ng-leave-active
  26. 46.
  27. 47.
  28. 49.

    HOW ARE ng-hide & ng-show DIFFERENT FROM ng-if ng-if destroys

    the DOM element when it is false. ng-hide hides the DOM element with display: none !important; when true. ng-show hides the DOM element with display: none !important; when false.
  29. 50.

    HOW ARE ng-hide & ng-show DIFFERENT FROM ng-if ng-if Easiest

    to use the CSS transitions ng-hide & ng-show • None-destructive to the DOM • Trickier to use the CSS transitions
  30. 51.

    WHEN ng-show BECOMES TRUE <div ng-show="showPanel" class="panel"> Here’s a panel!

    </div> This DIV would only be shown if “showPanel” evaluated to “true”
  31. 54.

    WHEN ng-show BECOMES TRUE FALSE ! ! ! ! !

    TRUE .ng-hide Persistent class added to the DOM element when false.
  32. 55.

    WHEN ng-show BECOMES TRUE FALSE ! ! ! ! !

    TRUE .ng-hide.ng-hide-remove .ng-hide Persistent class added to the DOM element when false.
  33. 56.

    WHEN ng-show BECOMES TRUE FALSE ! ! ! ! !

    TRUE .ng-hide.ng-hide-remove .ng-hide-remove .ng-hide Persistent class added to the DOM element when false.
  34. 57.

    WHEN ng-show BECOMES TRUE FALSE ! ! ! ! !

    TRUE .ng-hide.ng-hide-remove .ng-hide-remove *poof* .ng-hide Persistent class added to the DOM element when false.
  35. 59.

    WHEN ng-show BECOMES FALSE TRUE ! ! ! ! !

    FALSE *No special classes are added*
  36. 60.

    WHEN ng-show BECOMES FALSE TRUE ! ! ! ! !

    FALSE .ng-hide-add *No special classes are added*
  37. 61.

    WHEN ng-show BECOMES FALSE TRUE ! ! ! ! !

    FALSE .ng-hide-add.ng-hide .ng-hide-add *No special classes are added*
  38. 62.

    WHEN ng-show BECOMES FALSE TRUE ! ! ! ! !

    FALSE .ng-hide-add.ng-hide .ng-hide-add .ng-hide *No special classes are added*
  39. 63.

    WHEN ng-show BECOMES FALSE TRUE ! ! ! ! !

    FALSE .ng-hide-add.ng-hide .ng-hide-add .ng-hide Persistent class added to the DOM element. *No special classes are added*
  40. 64.

    CHEATSHEET ng-show CLASS WATERFALL FALSE ! ! TRUE ! !

    FALSE *poof* (default styling) .ng-hide.ng-hide-remove .ng-hide-remove .ng-hide .ng-hide-add.ng-hide .ng-hide-add .ng-hide
  41. 69.
  42. 70.
  43. 73.

    // Default panel style .panel{ width: 400px; position: fixed; top:

    0; bottom: 0; left: 200px; background: grey; } ! // Slide out transition for ng-show .panel.ng-hide { left: -400px; } ! .panel.ng-hide-remove, .panel.ng-hide-add { transition: .3s ease all; // overwrite .ng-hide’s default // of “display: none !important;” display: block !important; }
  44. 74.
  45. 75.
  46. 77.
  47. 78.
  48. 80.
  49. 82.
  50. 85.

    /* Animation for showing the .scaling-action section */ .drop-in {

    transition: .3s linear all; opacity: 1; margin-top: 0px; } ! .drop-in.ng-hide { opacity: 0; margin-top: -15px; } ! .drop-in.ng-hide-add, .drop-in.ng-hide-remove { /* this needs to be here to make it visible during the animation */ display: block !important; }
  51. 88.
  52. 89.
  53. 91.

    <input ng-model="numberOfServers" type="number" min="-10" max="10" step="1" /> ! <ng-pluralize count="numberOfServers"

    when="{'0': '', '1': 'Server', '-1': 'Server', 'other': 'Servers'}"> </ng-pluralize>
  54. 92.

    <input ng-model="numberOfServers" type="number" min="-10" max="10" step="1" /> ! <ng-pluralize count="numberOfServers"

    when="{'0': '', '1': 'Server', '-1': 'Server', 'other': 'Servers'}"> </ng-pluralize>
  55. 93.

    Remastered Animation in AngularJS 1.2 ! by Year of Moo

    ! www.yearofmoo.com/2013/08/ remastered-animation-in- angularjs-1-2.html MORE IN DEPTH ARTICLE