多次使用 jQuery 触发 CSS 转换

Question

我有一些代码可以成功地旋转 div 我想要的方式，但是，它只执行一次。我假设这是因为该函数只是添加了 CSS transform 属性，一旦添加它们，浏览器（我在 Win7 上使用 Chrome）并不关心它们是否被第二次添加。有没有办法让div 在我每次点击时旋转，而不是只旋转一次？

jQuery

$(function(){
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate(-360deg)',
            '-ms-transform':'rotate(-360deg)',
            '-moz-transform':'rotate(-360deg)',
            '-o-transform':'rotate(-360deg)'
        });
    });
});

HTML

<div class="hanging-div"><img src="http://placehold.it/65x350"></div>

CSS

.hanging-div {
    margin:0 auto;
    display:block;
    width:200px;
    padding:50px 0;
    transition:all 2s;
    -moz-transition:all 2s;
    -webkit-transition:all 2s;
    -o-transition:all 2s;
    transform-origin:50% 0%;
    -moz-transform-origin:50% 0%;
    -webkit-transform-origin:50% 0%;
    -ms-transform-origin:50% 0%;
    -o-transform-origin:50% 0%;
}

这是小提琴：http://jsfiddle.net/MrP43/1/

编辑

之后我也尝试过删除 transform 属性，但似乎没有效果。

$(function(){
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate(-360deg)',
            '-ms-transform':'rotate(-360deg)',
            '-moz-transform':'rotate(-360deg)',
            '-o-transform':'rotate(-360deg)'
        }, function(){
                $(this).css({
                    'transform':'',
                    '-ms-transform':'',
                    '-moz-transform':'',
                    '-o-transform':''
                });
        });
    });
});

Answer 1

另一种可能的方法是在动画完成后通过反向转换手动重置转换：

$('.hanging-div').on('click', function(){
    $('.hanging-div').css({
        'transition':'all 0.45s ease-in-out 0s',
        'transform':'rotate(-360deg)' 
    });
    setTimeout(function() {
        $('.hanging-div').css({
            'transition':'all 0s ease-in-out 0s',
            'transform':'rotate(0deg)'
        });
    }, 450); // transition duration goes here (in ms)
});

注意：使用$(this)时似乎不起作用，不知道为什么...。

Answer 2

好的，感谢@GroundZero，我已经弄明白了。我只是将旋转度数设为变量，并为每次点击从该变量中减去 360 度，现在它按预期工作。现在我想知道这是否是最好的方法？它有效，所以我没有抱怨，但如果其他人有任何解决方案，我很乐意看到他们。谢谢！

$(function(){
    n = -360;
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate('+n+'deg)',
            '-ms-transform':'rotate('+n+'deg)',
            '-moz-transform':'rotate('+n+'deg)',
            '-o-transform':'rotate('+n+'deg)'
        });
        n-=360;
    });
});

小提琴：http://jsfiddle.net/tuJjg/