如何保留一個元素在CSS3中的縮放直到mouseleave？然後在mouseleave比例尺元素回到它的原始大小

Question

當我在按鈕上使用mouseenter我希望在一個單獨的元素上觸發CSS3動畫中的縮放命令。

我的代碼目前是這樣做的，但是我需要縮放以保持它的完成點in-until mouseremove，然後縮放的元素需要縮小到初始尺寸。

我該怎麼做？

這裏是我的代碼：

$("#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) } 
} 

謝謝。

Answer 1

改爲使用.hover()事件處理程序。

變化mouseenter到hover

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

這是一樣的

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

---

，第一部分是基於如何刪除類..

但是你做不需要使用動畫進行縮放......只需進行轉換即可。

既然轉換默認情況下都是雙向的，那麼一旦刪除類，它就會自動處理放大。

演示在http://jsfiddle.net/3tsuS/