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/を参照)。この種のアニメーションはかなり CPU を消費するため、CSS3 で対応するトランジションを使用したいと思います。

そこで、animate-enhanced プラグインを使ってみました。これは、CSS3 を使用する場合を除いて機能します。アニメーション/トランジションが完了すると、絶対 div の bottom プロパティが保持されません。ここで jsfiddle を確認できます: http://jsfiddle.net/2p8Gu/

アニメーション後に div の位置を修正しようとすると、奇妙な効果が得られます。http: //jsfiddle.net/cAUt7/を参照してください。

また、拡張プラグインのドキュメントを読み、オプション「avoidTransforms」、「useTranslate3d」、および「leaveTransforms」を試してみましたが、これ以上成功しませんでした。

だから、私の質問：

CSS3でこの種のアニメーションを行うにはどうすればよいですか?

PS: CSS3 に変換するとイージング効果も機能しなくなりますが、実際にこの種の効果が CSS3 でサポートされているかどうか、またはその方法がわかりません。

4

1 に答える 1

1

You can actually do it using CSS3 with less code. The only Javascript you'll need is one line to add a CSS class to an element. The CSS class will contain the CSS3 transition properties needed to perform your animation.

Example (makes the element grow 1.5 times in size):

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

And then just do this in your JS:

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

Et voila. You can animate opacity, dimensions, position, padding, margins, color (font, background, etc.), and tons of other stuff. Most, but not all, properties support being animated. Check the specs and your local browser vendor to see which ones are animatable.

于 2013-01-08T08:26:13.677 に答える