获取转换元素的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事件。