獲取轉換元素的CSS屬性/暫停CSS3轉換

Question

我試圖暫停css3轉換，因此有問題的元素在單擊暫停按鈕時保持其確切的css屬性。我想過的方式是在轉換過程中獲取元素的CSS屬性，並使用.css（）將它們設置爲該屬性，這是否可行？如何在轉換期間獲取元素的CSS屬性。

HTML

<div id="productimage">   
    </div> 
<a href="#" id="pause">Pause</a> 

CSS

#productimage { 
     position:absolute; 
     height: 550px; 
     width: 393px; 
     background-image: url("../img/blusen.jpg"); 
     background-repeat:no-repeat; 
     background-position:50% 50%; 
     background-color: #fff; 
     background-size:396px 600px; 
     top:191px; 
     left:10px; 
    } 


#productimage.step1 { 
    background-size:1500px 2275px; 
    -webkit-transition: all 2.5s ease-in-out; -moz-transition: all 2.5s ease-in-out; -o-transition: all 2.5s ease-in-out; 
} 

JQUERY

$("#pause").click(function(e) { 
     e.preventDefault(); 
     $('#productimage').addClass('step1'); 
} 

Answer 1

您可以通過複製由過渡更改的屬性，將屬性設置爲已更改的屬性，然後刪除爲其設置動畫的類來暫停過渡。當然，如果您使用相同的對象進行動畫/暫停，您需要爲第一次點擊設置動畫，然後暫停點擊下一次。

注：在CSS background-size屬性!important是必要的，除非你有動畫類比jQuery選擇更平整選擇，又名像div #productimage.step1 {，而不是僅僅#productimage.step1 {。由於#productimage和#productimage.step1都是一個水平，你的榜樣需要!important

我採取這種做法，並與this example jsFiddle

/* jQuery */ 
var image = $("#productimage"); 
$("#pause").click(function (e) { 
    e.preventDefault(); 
    if(!image.hasClass('step1')) 
    { 
     image.addClass('step1'); 
    } 
    else { 
     var css = image.css("background-size"); // Get the changed attribute(s) 
     image.css({'background-size': css}); // Set the changed attribute(s) 
     image.removeClass('step1'); 
    } 
}); 

/* Changed CSS */ 
#productimage.step1 { 
    -webkit-transition: all 2.5s ease-in-out; 
    -moz-transition: all 2.5s ease-in-out; 
    -o-transition: all 2.5s ease-in-out; 
    background-size:1500px 2275px !important;  
} 

Answer 2

你有沒有使用jQuery .stop考慮？您也可以使用回調來跳轉到給定事件的末尾，例如animate（）。

文檔可以在這裏找到：http://api.jquery.com/stop/

而且，具有實現頁面的底部一看，有一個工作示範與我覺得很好適用於您的情況的onclick .stop事件。