jquery - 在过渡/暂停 CSS3 过渡中获取元素的 CSS 属性

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;    
}