0

我尝试使用的插件列表：

  • 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是否支持这种效果或如何做。

4

1 回答 1

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

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

于 2013-01-08T08:26:13.677 回答