Donc, je comprends comment effectuer à la fois des transitions et des animations CSS3. Ce qui n'est pas clair, et j'ai recherché sur Google, c'est quand utiliser lequel.
Par exemple, si je veux faire rebondir une balle, il est clair que l'animation est la voie à suivre. Je pourrais fournir des images clés et le navigateur ferait les images intermédiaires et j'aurais une belle animation en cours.
Cependant, il existe des cas où un tel effet peut être obtenu dans les deux sens. Un exemple simple et courant serait d'implémenter le menu du tiroir coulissant de style facebook:
Cet effet peut être obtenu grâce à des transitions comme ceci:
.sf-page {
-webkit-transition: -webkit-transform .2s ease-out;
}
.sf-page.out {
-webkit-transform: translateX(240px);
}
Ou, à travers des animations comme celle-ci:
.sf-page {
-webkit-animation-duration: .4s;
-webkit-transition-timing-function: ease-out;
}
.sf-page.in {
-webkit-animation-name: sf-slidein;
-webkit-transform: translate3d(0, 0, 0);
}
.sf-page.out {
-webkit-animation-name: sf-slideout;
-webkit-transform: translateX(240px);
}
@-webkit-keyframes sf-slideout {
from { -webkit-transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(240px, 0, 0); }
}
@-webkit-keyframes sf-slidein {
from { -webkit-transform: translate3d(240px, 0, 0); }
to { -webkit-transform: translate3d(0, 0, 0); }
}
Avec du HTML qui ressemble à ceci:
<div class="sf-container">
<div class="sf-page in" id="content-container">
<button type="button">Click Me</button>
</div>
<div class="sf-drawer">
</div>
</div>
Et, ce script jQuery d'accompagnement:
$("#content-container").click(function(){
$("#content-container").toggleClass("out");
// below is only required for css animation route
$("#content-container").toggleClass("in");
});
Ce que j'aimerais comprendre, c'est quels sont les avantages et les inconvénients de ces approches.
- Une différence évidente est que l'animation prend beaucoup plus de code.
- L'animation donne une meilleure flexibilité. Je peux avoir différentes animations pour glisser vers l'extérieur et l'intérieur
- Y a-t-il quelque chose à dire sur la performance? Les deux profitent-ils de l'accélération h / w?
- Ce qui est plus moderne et la voie à suivre
- Avez-vous autre chose à ajouter?