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

你考虑过使用jQuery .stop吗？您还可以使用回调跳到给定事件的末尾，例如animate（）。

可以在此处找到文档：http://api.jquery.com/stop/

另外，请查看页面底部，有一个onclick .stop事件的工作演示，我认为这些事件很适合您的情况。

Answer 2

您可以通过复制转换更改的属性，将属性设置为更改的属性，然后删除为其设置动画的类来暂停转换。当然，如果您使用相同的对象进行动画/暂停，则需要为第一次单击设置动画，然后在下次单击时将其暂停。

注意： CSS !important属性中的background-size是必要的，除非你的动画类的选择比jQuery选择器更高，类似于{{ 1}}而不仅仅是div #productimage.step1 {。由于#productimage.step1 {和#productimage都是一个级别，因此您的示例需要#productimage.step1

我采用了这种方法，提出了this example jsFiddle

!important

获取转换中的元素的CSS属性/暂停CSS3转换

2 个答案: