javascript - 将 div 从特定 Angular 旋转到另一个 Angular

Question

我在页面中有一个div，它已经通过css“transform:rotate(60deg)”旋转到60度。我想旋转并动画到 Angular 变量中的值，从当前 Angular (即 60 度)开始动画。

<script type="text/javascript">
    var angle = 0;
    $(document).ready(function () {
        $('#rotate').click(function () {
            angle += 90;
            $('#div1').animate({ rotate: angle }, {
                step: function (now, fx) {
                    $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                    $(this).css('transform', 'rotate(' + now + 'deg)');
                },
                duration: 3000
            }, 'linear');

        });

    });
</script>
<style type="text/css">
    #div1
    {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 100px;
        left: 100px;
        border-spacing: 0;
        background-color: red;
        transform:rotate(60deg);
    }
</style>
<div id="div1">
    Text</div>
<div id="rotate" > Rotate</div>

它确实会旋转和动画，但首先将 div 重置为其默认位置。请帮忙。谢谢。

Answer 1

这是一个适合您跨浏览器的工作 fiddle : http://jsfiddle.net/tNLSL/

var angle = 60;
$(document).ready(function () {
        var start = 60;
        var end = start + 90;
    $('#rotate').click(function () {
                $('#div1').animateRotate(start,end);
                start = end;
                end = end +90;    
    });

});
$.fn.animateRotate = function(startAngle, endAngle, duration, easing, complete){
    return this.each(function(){
        var elem = $(this);

        $({deg: startAngle}).animate({deg: endAngle}, {
            duration: duration,
            easing: easing,
            step: function(now){
                elem.css({
                  '-moz-transform':'rotate('+now+'deg)',
                  '-webkit-transform':'rotate('+now+'deg)',
                  '-o-transform':'rotate('+now+'deg)',
                  '-ms-transform':'rotate('+now+'deg)',
                  'transform':'rotate('+now+'deg)'
                });
            },
            complete: complete || $.noop
        });
    });
};