Vì vậy, tôi hiểu làm thế nào để thực hiện cả chuyển tiếp và hoạt hình CSS3. Điều không rõ ràng và tôi đã hiểu, là khi nào nên sử dụng.
Ví dụ, nếu tôi muốn làm cho một quả bóng nảy, rõ ràng hoạt hình là con đường để đi. Tôi có thể cung cấp khung hình chính và trình duyệt sẽ thực hiện các khung trung gian và tôi sẽ có một hoạt hình đẹp.
Tuy nhiên, có những trường hợp khi một hiệu ứng nói trên có thể đạt được một trong hai cách. Một ví dụ đơn giản và phổ biến sẽ được thực hiện trình đơn ngăn kéo trượt kiểu facebook:
Hiệu ứng này có thể đạt được thông qua các chuyển đổi như vậy:
.sf-page {
-webkit-transition: -webkit-transform .2s ease-out;
}
.sf-page.out {
-webkit-transform: translateX(240px);
}Hoặc, thông qua hình ảnh động như vậy:
.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); }
}Với HTML trông giống như vậy:
<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>Và, tập lệnh jQuery đi kèm này:
$("#content-container").click(function(){
$("#content-container").toggleClass("out");
// below is only required for css animation route
$("#content-container").toggleClass("in");
});Điều tôi muốn hiểu là những ưu và nhược điểm của những cách tiếp cận này.
- Một sự khác biệt rõ ràng là hoạt hình là lấy nhiều mã hơn.
- Hoạt hình cho phép linh hoạt tốt hơn. Tôi có thể có hình ảnh động khác nhau để trượt ra và vào
- Có điều gì đó có thể nói về hiệu suất. Cả hai đều tận dụng khả năng tăng tốc h / w?
- Cái nào hiện đại hơn và con đường phía trước
- Bất cứ điều gì khác bạn có thể thêm?