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
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
330
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
距離関数を極める！ / SESSIONS 2024
gam0022
0
280
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
660
Jakarta EE meets AI
ivargrimstad
0
600
subpath importsで始めるモック生活
10tera
0
300
弊社の「意識ﾁｮｯﾄ低いアーキテクチャ」10選
texmeijin
5
24k
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
4 Signs Your Business is Dying
shpigford
180
21k
It's Worth the Effort
3n
183
27k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
The Cult of Friendly URLs
andyhume
78
6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k

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