5 minutos sobre CSS3 transitions

Transcript

1. CSS Transitions 5 minutos sobre Saturday, August 4, 12
2. @lucasmazza Saturday, August 4, 12
3. Saturday, August 4, 12
4. @casadocodigo Saturday, August 4, 12
5. Abstract CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. http://www.w3.org/TR/css3-transitions/ o quê? Saturday, August 4, 12
6. TL,DR: animações disparadas por mudanças no estilo de um elemento. o quê? Saturday, August 4, 12
7. QconSP 2012 margin-left: 0; Saturday, August 4, 12
8. QconSP 2012 margin-left: 0; margin-left: 100px; Saturday, August 4, 12
9. QconSP 2012 margin-left: 0; margin-left: 100px; margin-left: 0; Saturday, August 4, 12
10. por quê? Saturday, August 4, 12
11. ✔ Performance por quê? Saturday, August 4, 12
12. ✔ Performance ✔ Efeitos com “:hover” sem JavaScript por quê? Saturday, August 4, 12
13. ✔ Performance ✔ Efeitos com “:hover” sem JavaScript ✔ Não intrusivas por quê? Saturday, August 4, 12
14. transition: opacity 0.5s ease, top 0.5s linear; sintaxe Saturday, August 4, 12
15. transition: opacity 0.5s ease, top 0.5s linear; Propriedade sintaxe Saturday, August 4, 12
16. transition: opacity 0.5s ease, top 0.5s linear; Propriedade duração sintaxe Saturday, August 4, 12
17. transition: opacity 0.5s ease, top 0.5s linear; Propriedade cálculo da velocidade duração sintaxe Saturday, August 4, 12
18. transition: all 0.5s ease; sintaxe Saturday, August 4, 12
19. sintaxe transition transition-property transition-duration transition-timing-function transition-delay Saturday, August 4, 12
20. JavaScript? $(".thing").fadeIn(); Saturday, August 4, 12
21. JavaScript? $(".thing").fadeIn(); // Pode se tornar $(".thing").addClass('visible'); Saturday, August 4, 12
22. .thing { opacity: 0; transition: opacity 0.2 linear; } .visible { opacity: 1; } Saturday, August 4, 12
23. callbacks? $(".thing").fadeIn(function() { // ... }); Saturday, August 4, 12
24. callbacks? $(".thing").fadeIn(function() { // ... }); $('.thing').one('transitionend', function() { // ... }).addClass('visible'); Saturday, August 4, 12
25. </3 prefixos • Chrome/Safari - 'webkitTransitionEnd' • Firefox - 'transitionend' • Opera - 'oTransitionEnd' • IE 10 - 'MSTransitionEnd' Saturday, August 4, 12
26. bootstrap-transition.js if($.support.transition) { // ... } Saturday, August 4, 12
27. bootstrap-transition.js console.log($.support.transition.end); // "webkitTransitionEnd" if($.support.transition) { // ... } Saturday, August 4, 12
28. exemplos 1. http://twitter.github.com/bootstrap/javascript.html 2. http://dabblet.com/gist/3203038 3. http://dabblet.com/gist/3203076 Saturday, August 4, 12
29. animatable @leaverou http://leaverou.github.com/animatable/ Saturday, August 4, 12
30. Obrigado! Saturday, August 4, 12