将 jquery 动画转换为 CSS3答案

【问题标题】：Translate jquery animate to CSS3将 jquery 动画转换为 CSS3
【发布时间】：2012-10-27 11:42:24
【问题描述】：

我尝试使用的插件列表：

jquery.animate-enhanced.min.js
jquery.easing.1.3.js

基本上，我试图将一些 jquery 动画转换为“纯 CSS3 过渡”。

这是我正在处理的代码：

$(this).animate({
                    bottom:(docHeight-80),      
                },600,
                'easeOutElastic',
                function(){
                    $(this).animate({
                        bottom:(docHeight-140),      
                    },800);

                }
            );

有了它，它工作得很好（参见http://jsfiddle.net/5dfCz/），我现在想在 CSS3 中使用相应的过渡，因为这种动画非常耗费 CPU。

所以，我尝试使用动画增强插件。除了使用 CSS3 之外，此方法有效，当动画/过渡完成时，我的绝对 div 的底部属性不会保留。你可以在这里看到一个 jsfiddle：http://jsfiddle.net/2p8Gu/

尝试在动画后修复 div 位置给我带来了奇怪的效果，请参见：http://jsfiddle.net/cAUt7/

另外，我阅读了增强的插件文档并使用选项“avoidTransforms”、“useTranslate3d”和“leaveTransforms”，但没有取得更多成功。

所以，我的问题：

如何在 CSS3 中制作这种动画？

PS: 转换成CSS3时，缓动效果也不再起作用，但我不知道CSS3是否支持这种效果或如何做到。

【问题讨论】：

标签： jquery css css-transitions

【解决方案1】：

您实际上可以用更少的代码使用 CSS3 来做到这一点。您需要的唯一 Javascript 是向元素添加 CSS 类的一行代码。 CSS 类将包含执行动画所需的 CSS3 过渡属性。

示例（使元素大小增长 1.5 倍）：

.someElement {
  -webkit-transition: .5s all linear; // animate all animatable CSS property changes
  -webkit-transform: scale(1);
}
.someElement.enlarged {
  -webkit-transform: scale(1.5);
}

然后在您的 JS 中执行此操作：

$(".someElement").addClass("enlarged"); // make it big
$(".someElement").removeClass("enlarged"); // make it normal size again

等等，瞧。您可以为不透明度、尺寸、位置、填充、边距、颜色（字体、背景等）和大量其他内容设置动画。大多数（但不是全部）属性都支持动画。检查规范和您当地的浏览器供应商，看看哪些是可动画的。

【讨论】：