如何解决CSS:动画与过渡?
看起来你已经掌握了如何去做,只是不知道什么时候去做。
过渡 _ _
,只是在两种不同状态之间执行的动画——即开始状态和结束状态。就像抽屉菜单一样,开始状态可以是打开的,结束状态可以是关闭的,反之亦然。
如果您想要执行 _ _ 具体涉及开始状态和结束状态的操作,或者您需要对过渡中的关键帧进行更细粒度的控制,那么您必须使用动画。
解决方法
所以,我了解如何同时执行 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);
}
.sf-page.out {
-webkit-animation-name: sf-slideout;
-webkit-transform: translateX(240px);
}
@-webkit-keyframes sf-slideout {
from { -webkit-transform: translate3d(0,0); }
to { -webkit-transform: translate3d(240px,0); }
}
@-webkit-keyframes sf-slidein {
from { -webkit-transform: translate3d(240px,0); }
to { -webkit-transform: translate3d(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");
});
我想了解的是这些方法的优缺点。
- 一个明显的区别是动画需要更多的代码。
- 动画提供了更好的灵活性。我可以有不同的动画来滑出和滑入
- 关于性能有什么可以说的。两者都利用硬件加速吗?
- 哪个更现代,未来的方向
- 还有什么可以补充的吗?
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。