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
1年目のクリエイターがつくりあげた！採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
160
デザインスプリントを活かすチームの在り方
mixi_design
PRO
2
770
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
870
Test Revisionista
olgastoryboard
0
110
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2k
新しいemoji😄のアイデアを Unicodeが募集中‼️🏃‍♀️💨💨💨 傾向を学んでみんな提案しよう💪
oguemon
2
670
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
170
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
260
TUNAG BOOK 2024
stmn
0
310
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
820
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
200
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.3k

Featured

See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Agile that works and the tools we love
rasmusluckow
327
21k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Become a Pro
speakerdeck
PRO
25
5k
Docker and Python
trallard
40
3.1k
Building an army of robots
kneath
302
42k
Measuring & Analyzing Core Web Vitals
bluesmoon
2
69
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
GitHub's CSS Performance
jonrohan
1030
460k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k

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