Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An introduction to designing CSS transitions us...

jessicaspacekat
April 16, 2014
Design
26
7k

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)

jessicaspacekat

April 16, 2014
Tweet

More Decks by jessicaspacekat

See All by jessicaspacekat
Craftstructionism (Making Stuff)
jessicaspacekat
0
240
DesignOps: Removing Friction from Your Front-end Development Workflow
jessicaspacekat
8
1.4k
On being an app designer.
jessicaspacekat
4
220
Rails Girls San Francisco Introduction slides
jessicaspacekat
1
130
DIY Standing Desk
jessicaspacekat
2
2.7k
Designing Your App
jessicaspacekat
14
1.9k

Other Decks in Design

See All in Design
知を活かせるチームづくりとは？-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
690
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
120
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.4k
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
170
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
390
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
190
TUNAG BOOK 2024
stmn
0
310
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
280
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
310
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
480
ZKK_001.pdf
nicholaspegu
0
1.4k
情報設計からのデザインアプローチ ～ユーザーの声を聞くよりも、もっとデータの声を聞け～
securecat
4
2.3k

Featured

See All Featured
How STYLIGHT went responsive
nonsquared
95
5.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
15
2k
Designing Experiences People Love
moore
138
23k
GitHub's CSS Performance
jonrohan
1030
460k
How GitHub (no longer) Works
holman
310
140k
Fireside Chat
paigeccino
33
3k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Thoughts on Productivity
jonyablonski
67
4.3k
Building a Scalable Design System with Sketch
lauravandoore
459
33k

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