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
230
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
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
1
350
Designing and Automating Component Specifications
nathanacurtis
3
350
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
190
我做了一個詐騙網站...嗎？
crboy
1
130
Emil Storyboards (2024)
abbsant
0
150
Tataki Ryu
olgastoryboard
0
120
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
130
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
12
5.5k
What Was UX Design All About?
ykazu
3
670
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
370
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.7k
0→1でデザイナーは何とむきあうのか？ / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
450

Featured

See All Featured
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Six Lessons from altMBA
skipperchong
26
3.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
For a Future-Friendly Web
brad_frost
174
9.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Being A Developer After 40
akosma
83
580k
Documentation Writing (for coders)
carmenintech
65
4.3k
How to Ace a Technical Interview
jacobian
275
23k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Building Flexible Design Systems
yeseniaperezcruz
325
37k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k

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