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. Hello, the mixin!

  2. Designing CSS Transitions Using AngularJS AN INTRODUCTION TO

  3. UI logic ! polish & refinement

  4. WHY I LIKE USING ANGULARJS TO PROTOTYPE INTERACTIONS

  5. None
  6. <button id=”target”>Add or remove servers</button>

  7. <div id=”another-target”> ... stuff ... </div> <button id=”target”>Add or remove

    servers</button>
  8. $( "#target" ).click(function() { $( "#another-target" ).addClass( "expanded" ); });

    JavaScript <div id=”another-target”> ... stuff ... </div> <button id=”target”>Add or remove servers</button>
  9. Write less JavaScript ! ikr?!

  10. None
  11. <button ng-click=”showMore=true”>Add or remove servers</button>

  12. <div ng-show=”showMore”> ... stuff ... </div> <button ng-click=”showMore=true”>Add or remove

    servers</button>
  13. Use features built into AngularJS to animate the transitions on

    the screen.
  14. ng-if ! ng-show, ng-hide ! ng-model ! ng-pluralize ANGULAR FEATURES

  15. I’m Jessica EX-PRODUCT DESIGNER AT

  16. None
  17. I LIKE USING A SANDBOX TO DESIGN CSS TRANSITIONS

  18. Easier to share. ! Straight to the component. ! Easier

    to isolate bugs. SANDBOX PROS
  19. Set up a AngularJS sandbox to design a component. I’ll

    use Plunker Plnkr.co I’LL DEMONSTRATE
  20. From plnkr.co click “Editor” SETTING UP A SANDBOX Use a

    template in the drop down tinyurl.com/angular-animate
  21. <script type="text/javascript" src="http://code.angularjs.org/1.2.1/ angular-animate.js"></script> ADD ANGULAR-ANIMATE Now Angular’s prefab CSS

    classes are available to use in CSS transitions.
  22. SWITCH FROM .CSS to .SCSS “New file”

  23. SWITCH FROM .CSS to .SCSS Delete style.css Plunker watches &

    compiles your .scss/.sass extensions
  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
  25. Fork this existing setup where it’s hooked up already: !

    tinyurl.com/angular-animate
  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”
  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>
  28. Hint: Watch a variable in the UI by putting it

    in double curly braces: <p>showCat is: {{ showCat }}.</p>
  29. None
  30. None
  31. NOW THE BASIC SHOW & HIDE BEHAVIORS ARE SET UP.

    ! LET’S ADD SOME ANIMATION USING CSS TRANSITIONS.
  32. <div ng-if="showCat" class="cat"> Here’s a cat! </div> WHEN ng-if BECOMES

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

    TRUE FALSE TRUE .ng-enter
  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
  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*
  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; }
  37. None
  38. None
  39. TRUE FALSE WHEN ng-if BECOMES FALSE <div ng-if="showCat" class="cat"> Here’s

    a cat! </div>
  40. TRUE FALSE .ng-leave WHEN ng-if BECOMES FALSE <div ng-if="showCat" class="cat">

    Here’s a cat! </div>
  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>
  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>
  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)
  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; }
  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
  46. None
  47. None
  48. CONDITIONALLY DISPLAY DOM ELEMENTS WITH ng-hide & ng-show

  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.
  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
  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”
  52. WHEN ng-show BECOMES TRUE FALSE ! ! ! ! !

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

    TRUE .ng-hide
  54. WHEN ng-show BECOMES TRUE FALSE ! ! ! ! !

    TRUE .ng-hide Persistent class added to the DOM element when false.
  55. WHEN ng-show BECOMES TRUE FALSE ! ! ! ! !

    TRUE .ng-hide.ng-hide-remove .ng-hide Persistent class added to the DOM element when false.
  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.
  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.
  58. WHEN ng-show BECOMES FALSE TRUE ! ! ! ! !

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

    FALSE *No special classes are added*
  60. WHEN ng-show BECOMES FALSE TRUE ! ! ! ! !

    FALSE .ng-hide-add *No special classes are added*
  61. WHEN ng-show BECOMES FALSE TRUE ! ! ! ! !

    FALSE .ng-hide-add.ng-hide .ng-hide-add *No special classes are added*
  62. WHEN ng-show BECOMES FALSE TRUE ! ! ! ! !

    FALSE .ng-hide-add.ng-hide .ng-hide-add .ng-hide *No special classes are added*
  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*
  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
  65. THE THING ABOUT .ng-hide

  66. .ng-hide { display: none !important; } ANIMATION KILLER!

  67. .ng-hide.ng-hide-add, .ng-hide.ng-hide-remove { display: block !important; } ANIMATION FIXER

  68. BUTTON TO TOGGLE showPanel <a ng-click="showPanel=!showPanel"> Toggle the panel </a>

  69. None
  70. None
  71. .nav ng-click="showPanel=!showPanel"

  72. ng-show="showPanel" .panel .nav ng-click="showPanel=!showPanel"

  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; }
  74. None
  75. None
  76. The slide-out Plunker ! tinyurl.com/slide-out-animation

  77. None
  78. None
  79. MOCKING UP A FORM WITH ng-show + ng-pluralize ! BONUS:

    Reusing an animation
  80. None
  81. ng-click="scalingActionChosen='true'"

  82. None
  83. ng-show="scalingActionChosen"

  84. ng-show="scalingActionChosen" class=”drop-in ng-hide”

  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; }
  86. The .drop-in class can now be applied to other elements

    with ng-hide or ng-show
  87. I used it 4 times in this form.

  88. None
  89. None
  90. ng-pluralize

  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>
  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>
  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
  94. Thanks! @jessicaspacekat