2017-11-04 7 views
1

私は、CSSセクションでjQueryアニメーションを使用してtransformを使用しようとすると、それが消えないことに気付きました。それは私のために働いていない唯一のプロパティです。TransformはjQueryと連携していません。アニメーション()

私が使用しようとしています:

$(myElement).animate({ 
    opacity: 1, 
    transform: "scale(1.5)" 
}, 7000); 

しかし、上記のコードをのみ変換無視して、不透明度アニメーションを渡します。

+1

:「*すべてのアニメーション化されたプロパティが**単一の数値にアニメ化されなければならない**、 [...] * " - 関連:[要素の変換を回転アニメーション](https://stackoverflow.com/questions/5462275/animate-element-transform-rotate) –

+0

したがって、変換する方法はありません。アニメーション可能なCSSプロパティであっても? –

+0

自動的にCSS自体を使用する以外にはありません。 - jQueryの '.animate()'はCSS [Transforms](https://www.w3.org/TR/css-transforms/)が標準化される6〜7年前に作成されたことに注意してください(2006年対2012年の2013年) 。純粋なJavaScriptの実装で、完全な数値スタイルをサポートするように設計されています。 - 他のQ&Aリンクに示されているように、式を使って他のスタイルをサポートするために、 'step:'オプションを使うことができます。 –

答えて

0

、これは動作します。

[ドキュメントから](http://api.jquery.com/animate/)

$(myElement).animate({ 
 
    height: ($(this).height()*1.5), 
 
    width: ($(this).width()*1.5) 
 
}, 7000);

1

アニメーションを処理するクラスを追加するには、アニメーションとjqueryにcssを使用することをお勧めします。 .animate()関数を使用して

$(myElement).addClass("animate");
.animate { 
 
    transition: all 7s; 
 
    transform: scale(1.5); 
 
}

+0

動作しますが、私のウェブサイトが遅れていたので、velocity.jsを使用するために.animate()を使用しようとしていました。 –

+0

OK。私は.animate()でそれをする方法を見つけました。別の答えを今投稿する –

関連する問題