0

ボタンで mouseenter を使用する場合、CSS3 アニメーションのスケール コマンドを別の要素でトリガーする必要があります。

私のコードは現在これを行っていますが、マウスを削除するまでスケールを終了点にとどめる必要があります。その後、スケールされた要素を元の寸法に戻す必要があります。

どうすればいいですか？

これが私のコードです：

$("#button").mouseenter(function() {
$('.transform').toggleClass('classname');
});

CSS:

.transform {
-webkit-transition: all 2s ease;  
-moz-transition: all 2s ease;  
-o-transition: all 2s ease;  
-ms-transition: all 2s ease;  
transition: all 2s ease;
}

.classname {
-webkit-animation: cssAnimation 1.000s 1 ease;
-moz-animation: cssAnimation 1.000s 1 ease;
-o-animation: cssAnimation 1.000s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: scale(1.000) }
to { -webkit-transform: scale(0.800) }
}

ありがとうございました。

4

1 に答える 1

0

.hover()代わりにイベント ハンドラを使用してください。

mouseenter に変更hover

$("#button").hover(function() {
    $('.transform').toggleClass('classname');
});

と同じです

$("#button").on('mouseenter mouseleave', function() {
    $('.transform').toggleClass('classname');
});

最初の部分は、クラスを削除する方法に基づいていました..

ただし、スケーリングにアニメーションを使用する必要はありません。トランジションだけで十分です。

また、トランジションはデフォルトで双方向に行われるため、クラスを削除すると自動的にスケールアップが処理されます。

http://jsfiddle.net/3tsuS/のデモ

于 2013-10-29T15:56:07.737 に答える