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

When jQuery and CSS3 Collide

Louis Lazaris
March 02, 2013
Programming
6
4.1k

When jQuery and CSS3 Collide

Some tips, techniques, and resources to help our tools work well together, with a specific focus on CSS3 transitions and animation.

Louis Lazaris

March 02, 2013
Tweet

More Decks by Louis Lazaris

See All by Louis Lazaris
DOM Features You Didn't Know Existed
impressivewebs
5
790
Front-end Tools: Sifting Through the Madness
impressivewebs
3
4.8k

Other Decks in Programming

See All in Programming
Modular Monolith Monorepo ～シンプルさを保ちながらmonorepoのメリットを最大化する～
yuisakamoto
6
570
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
350
最新TCAキャッチアップ
0si43
0
200
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
280
Vapor Revolution
kazupon
1
210
Djangoの開発環境で工夫したこと - pre-commit / DevContainer
hiroki_yod
1
180
Figma Dev Modeで変わる！Flutterの開発体験
watanave
0
150
CSC509 Lecture 11
javiergs
PRO
0
180
AWS Lambdaから始まった
Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.3k
Click-free releases & the making of a CLI app
oheyadam
2
120
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.8k

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
The World Runs on Bad Software
bkeepers
PRO
65
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
How GitHub (no longer) Works
holman
310
140k
Typedesign – Prime Four
hannesfritz
40
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
6.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
For a Future-Friendly Web
brad_frost
175
9.4k
YesSQL, Process and Tooling at Scale
rocio
169
14k

Transcript

  1. When jQuery & CSS3 Collide by Louis Lazaris

  2. Who is This Guy?

  3. www.impressivewebs.com

  4. None

  5. I’ve Helped With...

  6. I Write...

  7. I Build...

  8. How I Feel

  9. The Front-end

  10. They Work Together

  11. Nobody wants this...

  12. Or This...

  13. Certainly Not This...

  14. But Together...

  15. Two Technologies

  16. Take-Away Concepts > Think Modular

  17. Take-Away Concepts > Think Modular > Learn the Subtleties

  18. Animation in jQuery > Uses .animate() > Or .fadeIn(), .slideUp(),

    etc

  19. Animation in jQuery

  20. Animation in jQuery

  21. Often Unnecessary?

  22. Often Unnecessary?

  23. The Alternative

  24. The CSS

  25. One Benefit of .animate()

  26. Use ‘transitionend’

  27. With Modernizr.prefixed()

  28. ‘transitionend’ on MDN

  29. Use ‘animationend’

  30. With Modernizr.prefixed()

  31. ‘animationend’ on MDN

  32. Web Animations 1.0

  33. Web Animations 1.0

  34. Defining App States

  35. Fresh Counting Done <html class="fresh"> htmlElement.className = 'counting'; htmlElement.className =

    'done'; Defining App States

  36. Defining App States

  37. None
  38. None

  39. Using Animate.css

  40. Using Animate.css

  41. Using Animate.css

  42. Options... > Use Existing Tools/Libraries > Build Your Own Reusable

    Modules

  43. Benefits? > Modular > Easier to Maintain

  44. Using CSS3 Transitions and Animations More Often...?

  45. How Are CSS3 Transitions Triggered?

  46. A Simple Transition

  47. What Triggers It?

  48. What Triggers It?

  49. This (kind of) means... Event  State Change State Change

     Transition

  50. How Does State Change? > :hover > :active > :focus

  51. How Does State Change? > :checked > :disabled > @media

  52. None

  53. Different Transitions on/off

  54. Different Transitions on/off

  55. Different Transitions on/off

  56. Different Transitions on/off

  57. Different Transitions on/off

  58. More Transition Subtleties...

  59. None
  60. None
  61. None
  62. None

  63. 1 Floated Boxes

  64. Increase Width & Height?

  65. 1 Causes Reflow

  66. Scale Transform?

  67. 1 1 Does Not Cause Reflow

  68. None

  69. Things That Are Out of the Flow... > Text shadows

    > Box shadows > display: none

  70. > position: absolute > position: fixed Things That Are Out

    of the Flow...

  71. > position: absolute > position: fixed > “position: relative” offsets

    Things That Are Out of the Flow...

  72. 1 Floated Boxes

  73. “position: relative” offsets 1

  74. > Outlines > Transform offsets (scale, skew, rotate, translate) Things

    That Are Out of the Flow...

  75. > Know your tools > Use them effectively What Does

    it Mean?

  76. Performance is King

  77. Jank Busters (video/slides)

  78. Ariya Hidayat (video/slides)

  79. Link Dump http://tinyurl.com/jquery-toronto

  80. Thank You! @ImpressiveWebs