CSS3 전환과 애니메이션을 모두 수행하는 방법을 알고 있습니다. 명확하지 않은 것은 내가 구글에서봤을 때 어느 것을 사용 해야하는지입니다.
예를 들어, 볼 바운스를 만들고 싶다면 애니메이션이 나아갈 길이라는 것이 분명합니다. 키 프레임을 제공 할 수 있고 브라우저는 중간 프레임을 수행 할 것이고 멋진 애니메이션을 만들 것입니다.
그러나, 상기 효과가 어느 방식 으로든 달성 될 수있는 경우가있다. 간단하고 일반적인 예는 페이스 북 스타일 슬라이딩 드로어 메뉴를 구현하는 것입니다.
이 효과는 다음과 같은 전환을 통해 달성 할 수 있습니다.
.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");
});내가 이해하고 싶은 것은 이러한 접근 방식의 장단점입니다.
- 한 가지 분명한 차이점은 애니메이션이 훨씬 더 많은 코드를 사용한다는 것입니다.
- 애니메이션은 더 나은 유연성을 제공합니다. 슬라이딩 및 인에 대한 다른 애니메이션을 가질 수 있습니다
- 성능에 대해 말할 수있는 것이 있습니까? 둘 다 하드웨어 가속을 활용합니까?
- 더 현대적이고 앞으로 나아갈 길
- 추가 할 수있는 것이 있습니까?