Rozumiem więc, jak wykonywać przejścia i animacje CSS3. Nie jest jasne, a wyszukałem w Google, kiedy użyć którego.
Na przykład, jeśli chcę, aby piłka odbiła się, jasne jest, że najlepszym rozwiązaniem jest animacja. Mógłbym dostarczyć klatki kluczowe, a przeglądarka zrobiłaby klatki pośrednie i będę mieć niezłą animację.
Istnieją jednak przypadki, w których wspomniany efekt można osiągnąć w dowolny sposób. Prostym i typowym przykładem byłoby wdrożenie przesuwanego menu szuflady w stylu Facebooka:
Efekt ten można osiągnąć poprzez przejścia takie jak:
.sf-page {
-webkit-transition: -webkit-transform .2s ease-out;
}
.sf-page.out {
-webkit-transform: translateX(240px);
}Lub za pomocą takich animacji:
.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); }
}Z HTML, który wygląda tak:
<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>I ten towarzyszący skrypt jQuery:
$("#content-container").click(function(){
$("#content-container").toggleClass("out");
// below is only required for css animation route
$("#content-container").toggleClass("in");
});Chciałbym zrozumieć, jakie są wady i zalety tych podejść.
- Jedną oczywistą różnicą jest to, że animacja wymaga znacznie więcej kodu.
- Animacja zapewnia większą elastyczność. Mogę mieć inną animację do wysuwania i wsuwania
- Czy jest coś, co można powiedzieć o wydajności? Czy obaj korzystają z przyspieszenia w trybie h / w?
- Który jest bardziej nowoczesny i stanowi przyszłość
- Coś jeszcze możesz dodać?