Question

所以，我得到的是一个三栏菜单。单击时，中间条淡出，其余两个移动占据相同的空间，然后分别旋转405deg和-405deg形成X.在下一次单击时，相同的两个条将45deg旋转回原始位置中间的酒吧退色了。

这是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转换是如何工作的。

编辑**：我尝试在打开时执行405deg，然后在关闭时执行0deg，这会产生405deg旋转的精确反转。我试图在打开时始终旋转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);
        }
    }

CSS转换：旋转 - 不理解为什么我会这样做

1 个答案: