javascript - CSS 变换 :Rotate - Not Understanding Why I'm Getting This Behavior

Question

所以，我得到的是一个三栏菜单。单击时，中间条淡出，其余两个移动到相同的空间，然后分别旋转 405 度和 -405 度，形成一个 X。在下一次单击时，相同的两个条旋转 45 度回到它们的原始位置，并且中间条淡入。

这是 fiddle :http://jsfiddle.net/ydxKH/

这是 JS/jQuery:

$(document).ready(function () {

    $('a.menu').click(function () {
        var i = $(this);

        if (i.hasClass('open')) {

            closeMenu();
            i.removeClass('open');

        } else {

            openMenu();
            i.addClass('open');

        }
    });

    var barOne = $('.menu-bar-top');
    var barTwo = $('.menu-bar-bottom');
    var barThree = $('.menu-bar-mid');
    var menuTrigger = $('nav.sidebar a');
    var nav = $('nav.sidebar');
    var footerHidden = $('footer.hidden');
    var bar = $('.bar');

    function transformMenu(top, transform) {
        return {
            'top': top,
            'transform': transform,
            '-webkit-transform': transform,
            '-moz-transform': transform,
            '-ms-transform': transform,
            '-o-transform': transform
        };
    }

    function openMenu() {
        barOne.css(transformMenu('8px', 'rotate(405deg)'));
        barTwo.css(transformMenu('8px', 'rotate(-405deg)'));
        nav.animate({'left': '+=145px'}, 200);
        footerHidden.animate({'bottom': '+=80px'}, 200);
        barThree.fadeOut(1);
        bar.not(barThree).css('background', '#fff');
        barThree.css('background', '#303030');
    }

    function closeMenu() {
        nav.stop(true, true).animate({'left': '-=145px'}, 200);
        footerHidden.animate({'bottom': '-=80px'}, 200);
        bar.css('background', '');
        barOne.css(transformMenu('3px', 'rotate(360deg)'));
        barTwo.css(transformMenu('13px', 'rotate(-360deg)'));
        if (nav.is(':animated')) {
            barThree.delay(200).fadeIn(200);
        }
    }
});

这就是问题所在:这会在 openMenu() 上产生正确的 405 度旋转，在 closeMenu 上产生正确的 45 度旋转，但在每个后续的 openMenu() 我只得到 45 度的旋转，而不是我第一次点击时得到的 405 度。我显然不了解 CSS 转换的工作原理。

编辑**:我试过在打开时做 405 度，然后在关闭时做 0 度，这会产生与 405 度旋转完全相反的结果。我试图在打开时始终旋转 405 度，在关闭时仅旋转 45 度。也许需要一个 JS 函数在每次后续点击时将 405 添加到原始旋转？

一如既往，我们非常感谢任何想法和想法。

Answer 1

我认为您想要实现的是返回 0 度(起点)而不是 360 度的动画。试试这个(http://jsfiddle.net/ydxKH/):

function closeMenu() {
        nav.stop(true, true).animate({
            'left': '-=145px'
        }, 200);
        footerHidden.animate({
            'bottom': '-=80px'
        }, 200);
        bar.css('background', '');
        barOne.css(transformMenu('3px', 'rotate(0deg)'));
        barTwo.css(transformMenu('13px', 'rotate(0deg)'));
        if (nav.is(':animated')) {
            barThree.delay(200).fadeIn(200);
        }
    }