Question

我试图使用的插件列表：

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中使用相应的过渡，因为这种动画非常昂贵。

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

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

此外，我已阅读增强型插件文档，并使用选项'avoidTransforms'，'useTranslate3d'和'leaveTransforms'进行播放，但未获得更多成功。

所以，我的问题：

我怎么能在CSS3中做这种动画？

PS：当转换为CSS3时，缓和效果也没有用，但我实际上并不知道CSS3是否支持这种效果或者如何做到这一点。

Answer 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

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

将jquery动画转换为CSS3

1 个答案: