CSS：动画vs.转换 [英] CSS: Animation vs. Transition

问题描述

所以，我理解如何执行CSS3过渡和动画。什么是不清楚，我已经google了，是什么时候使用。

例如，如果我想使球反弹，很明显动画是要走的路。我可以提供关键帧，浏览器会做中间帧，我会有一个很好的动画。

但是，有些情况下，办法。一个简单而常见的例子是实现Facebook风格的滑动抽屉菜单：

这种效果可以通过如下转换实现：

  .sf-page {
 -webkit-transition：-webkit-transform .2s ease-out; 
} 
 
 .sf-page.out {
 -webkit-transform：translateX（240px）; 
} 
  

http://jsfiddle.net/NwEGz/

或者，通过像这样的动画：

  .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）; } 
} 
  

http://jsfiddle.net/4Z5Mr/

对于如下所示的HTML：

 < div class =sf-container> 
< div class =sf-page inid =content-container> 
< button type =button>点击我< / button> 
< / div> 
< div class =sf-drawer> 
< / div> 
< / div> 
  

并且，这个附带的jQuery脚本：

  $（＃content-container）。click（function（）{
 $（＃content-container）。toggleClass（out）; 
 //下面是只需要css动画路由
 $（＃content-container）。toggleClass（in）; 
}）; 
  

我想了解的是这些方法的利弊。

1. 一个明显的区别是动画会占用更多的代码。


2. 动画具有更好的灵活性。我可以有不同的动画滑出和在


3. 有什么可以说的性能。


4. 这是更现代的方式还是前进的方式


5. 您还可以添加其他任何内容吗？

解决方案

看起来你有一个关于如何做的句柄，

状态和结束状态。像抽屉菜单一样，开始状态可以打开，结束状态可以关闭，反之亦然。

如果要执行 不 具体涉及开始状态和结束状态，或者您需要对转换中的关键帧进行更细致的粒度控制，那么您必须使用动画。

So, I understand how to perform both CSS3 transitions and animations. What is not clear, and I've googled, is when to use which.

For example, if I want to make a ball bounce, it is clear that animation is the way to go. I could provide keyframes and the browser would do the intermediates frames and I'll have a nice animation going.

However, there are cases when a said effect can be achieved either way. A simple and common example would be implement the facebook style sliding drawer menu:

This effect can be achieved through transitions like so:

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

Or, through animations like so:

.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); }
}

http://jsfiddle.net/4Z5Mr/

With HTML that looks like so:

<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>

And, this accompanying jQuery script:

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

What I'd like to understand is what are the pros and cons of these approaches.

1. One obvious difference is that animating is taking a whole lot more code.
2. Animation gives better flexibility. I can have different animation for sliding out and in
3. Is there something that can be said about performance. Do both take advantage of h/w acceleration?
4. Which is more modern and the way going forward
5. Anything else you could add?

解决方案

It looks like you've got a handle on how to do them, just not when to do them.

A transition is an animation, just one that is performed between two distinct states - i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state could be closed, or vice versa.

If you want to perform something that does not specifically involve a start state and an end state, or you need more fine grain control over the keyframes in a transition, then you've got to use an animation.

这篇关于CSS：动画vs.转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！