JQueryの.animate()
で要素を回転するにはどうすればよいですか?現在不透明度を正しくアニメーション化している下の行を使用していますが、これはCSS3変換をサポートしていますか?
$(element).animate({
opacity: 0.25,
MozTransform: 'rotate(-' + -amount + 'deg)',
transform: 'rotate(' + -amount + 'deg)'
});
私の知る限り、基本的なアニメーションでは数値以外のCSSプロパティをアニメーション化できません。
step 関数とユーザーのブラウザーに適したcss3変換を使用して、これを実現できると思います。 CSS3変換は、すべてのブラウザーをカバーするのに少し注意が必要です(たとえば、IE6ではMatrixフィルターを使用する必要があります)。
EDIT:ここに、Webkitブラウザー(Chrome、Safari)で機能する例があります: http://jsfiddle.net/ryleyb/ ERRmd /
IE9のみをサポートする場合は、-webkit-transform
の代わりにtransform
を使用できます。または、-moz-transform
がFireFoxをサポートします。
使用するトリックは、気にしないCSSプロパティ(text-indent
)をアニメーション化し、その値をステップ関数で使用して回転を行うことです。
$('#foo').animate(
..
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
}
...
ライリーの答え は素晴らしいですが、要素内にテキストがあります。テキストを他のすべてと一緒に回転させるために、text-indentの代わりにborder-spacingプロパティを使用しました。
また、少し明確にするために、要素のスタイルで、初期値を設定します。
#foo {
border-spacing: 0px;
}
次に、アニメーションチャンクで、最終的な値:
$('#foo').animate({ borderSpacing: -90 }, {
step: function(now,fx) {
$(this).css('transform','rotate('+now+'deg)');
},
duration:'slow'
},'linear');
私の場合、反時計回りに90度回転します。
私の意見では、jQueryのanimate
は、2Dまたは3Dプロパティでそのようなアニメーションを実行するCSS3 transition
と比較して、少し使い古されています。また、ブラウザに任せて JavaScriptというレイヤーを忘れることでCPUジュースを節約できる -特に、アニメーションでブラストしたい場合は。 JavaScriptで機能を定義するなので、スタイル定義が存在するアニメーションを作成するのが好きです。 JavaScriptに挿入するプレゼンテーションが多いほど、後で直面する問題が多くなります。
あなたがしなければならないのは、CSS addClass
プロパティを持つクラスを設定するアニメーション化したい要素にtransition
を使用することです。 アニメーションを単に「アクティブ化」、これは純粋なプレゼンテーションレイヤーに実装のままです。
。js
// with jQuery
$("#element").addClass("Animate");
// without jQuery library
document.getElementById("element").className += "Animate";
jQueryでクラスを削除 、または ライブラリなしでクラスを削除 を簡単に実行できます。
。css
#element{
color : white;
}
#element.Animate{
transition : .4s linear;
color : red;
/**
* Not that ugly as the JavaScript approach.
* Easy to maintain, the most portable solution.
*/
-webkit-transform : rotate(90deg);
}
。html
<span id="element">
Text
</span>
これは、ほとんどのユースケースに対応した高速で便利なソリューションです。
また、異なるスタイリング(代替CSSプロパティ)を実装し、グローバルな.5sアニメーションでオンザフライでスタイルを変更したい場合にもこれを使用します。 BODY
に新しいクラスを追加しますが、次のような形式の代替CSSがあります。
。js
$("BODY").addClass("Alternative");
。css
BODY.Alternative #element{
color : blue;
transition : .5s linear;
}
これにより、異なるCSSファイルをロードせずに、アニメーションに異なるスタイルを適用できます。 class
を設定するには、JavaScriptのみを使用します。
Ryleyとatonycの回答に追加するために、実際にはtext-index
やborder-spacing
などの実際のCSSプロパティを使用する必要はありませんが、代わりにrotation
やmy-awesome-property
などの偽のCSSプロパティを指定できます。将来的に実際のCSSプロパティになるリスクのないものを使用することをお勧めします。
また、誰かが他の物を同時にアニメーション化する方法を尋ねました。これは通常どおり行うことができますが、アニメーション化されたプロパティごとにstep
関数が呼び出されるため、次のようにプロパティを確認する必要があります。
$('#foo').animate(
{
opacity: 0.5,
width: "100px",
height: "100px",
myRotationProperty: 45
},
{
step: function(now, tween) {
if (tween.prop === "myRotationProperty") {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
// add Opera, MS etc. variants
$(this).css('transform','rotate('+now+'deg)');
}
}
});
(注:jQueryドキュメントで「Tween」オブジェクトのドキュメントを見つけることができません。 アニメーションドキュメントページ から http://api.jquery。へのリンクがあります。 com/Types#Tween 存在しないように見えるセクションGithubでTweenプロトタイプのコードを見つけることができます here )。
CSSトランジションを使用するだけです:
$(element).css( { transition: "transform 0.5s",
transform: "rotate(" + amount + "deg)" } );
setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );
例として、アニメーションの継続時間を0.5秒に設定します。
アニメーションが終了した後(500ミリ秒)setTimeout
cssプロパティを削除するには、transition
に注意してください。
読みやすくするために、ベンダープレフィックスを省略しました。
このソリューションには、ブラウザーの移行サポートが必要です。
私はこの記事を偶然見つけて、jQueryでCSS変換を使用して無限ループアニメーションを作成しようとしていました。これは私にとってはうまくいきました。しかし、それがどれほどプロフェッショナルかはわかりません。
function progressAnim(e) {
var ang = 0;
setInterval(function () {
ang += 3;
e.css({'transition': 'all 0.01s linear',
'transform': 'rotate(' + ang + 'deg)'});
}, 10);
}
使用例:
var animated = $('#elem');
progressAnim(animated)
//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow
function twistMyElem(){
var ball = $('#form');
document.getElementById('form').style.zIndex = 1;
ball.animate({ zIndex : 360},{
step: function(now,fx){
ball.css("transform","rotateY(" + now + "deg)");
},duration:3000
}, 'linear');
}