Отже, я розумію, як виконувати як переходи CSS3, так і анімації. Що не зрозуміло, і я гуглив, це коли використовувати.
Наприклад, якщо я хочу зробити кульовий відмов, зрозуміло, що анімація - це шлях. Я можу надати ключові кадри, і браузер зробить проміжні кадри, і у мене буде хороша анімація.
Однак бувають випадки, коли зазначений ефект можна досягти будь-яким способом. Простим і поширеним прикладом може бути реалізація розсувного меню висувного ящика у стилі facebook:
Цей ефект може бути досягнутий шляхом таких переходів:
.sf-page {
-webkit-transition: -webkit-transform .2s ease-out;
}
.sf-page.out {
-webkit-transform: translateX(240px);
}Або через такі анімації:
.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); }
}З HTML, який виглядає так:
<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>І цей супровідний сценарій jQuery:
$("#content-container").click(function(){
$("#content-container").toggleClass("out");
// below is only required for css animation route
$("#content-container").toggleClass("in");
});Що я хотів би зрозуміти - це плюси і мінуси цих підходів.
- Одна очевидна відмінність полягає в тому, що анімація бере набагато більше коду.
- Анімація дає кращу гнучкість. У мене може бути різна анімація для висування та виходу
- Чи є щось, що можна сказати про продуктивність. Чи використовуєте обидва переваги прискорення в год / з?
- Що більш сучасне і шлях, який рухається вперед
- Що ще можна додати?