javascript - 两个 if 语句。两者都有效。只有一张印

Question

我正在尝试与 fullpage.js 同步旋转固定图像，它在大多数情况下都有效。

为了防止不必要的旋转，我必须堆叠 css rotate() 值。

当我向下滚动时它会起作用，它会按我想要的方式堆叠(即 180、360、540，..)

当我向上滚动时它不起作用。

我试过用alerts来判断计算是否完成，在stacking上好像没有问题，但是scroll up部分代码就是打印不到HTML文档。

这是我的代码；

var rotation = 0,
    rotationInc = 180,
    miniLogo = $('#mini-logo');

$(document).ready(function () {
  $('#home').fullpage({
    verticalCentered: false,
    scrollingSpeed: 300,
    onLeave: function (index, nextIndex, direction) {
      if (direction == 'down') {
        rotation += rotationInc;

        setTimeout(function () {
          miniLogo.addClass('enlarge');
        }, 400);

        miniLogo.each(function () {
          alert(rotation);
        });

        setTimeout(function () {
          miniLogo.css({
            'transform': 'rotate(' + rotation + 'deg)'
          });
        }, 800);

        setTimeout(function () {
          miniLogo.removeClass('enlarge');
        }, 1200);
      }

      if (direction == 'up') {
        rotation -= rotationInc;

        setTimeout(function () {
          miniLogo.addClass('enlarge');
        }, 400);

        miniLogo.each(function () {
          alert(rotation);
        });

        setTimeout(function () {
          miniLogo.css({
            'transform': 'rotate(' + rotation + 'deg);'
          });
        }, 800);

        setTimeout(function () {
          miniLogo.removeClass('enlarge');
        }, 1200);
      }
    }
  });
});

第一个 if 语句完美运行。第二个给出了我想要的警报，但没有在 html 上打印降低的程度。

非常感谢任何帮助，我确定我犯了一个菜鸟错误。

Answer 1

试试这个:

rotation = 0;
rotationInc = 180;
miniLogo = $('#mini-logo');

$(document).ready(function () {
  $('#home').fullpage({
    verticalCentered: false,
    scrollingSpeed: 300,
    onLeave: function (index, nextIndex, direction) {

    var rotation = (direction == 'down') 
        ? rotation += rotationInc
        : rotation -= rotationInc;

        setTimeout(function () {
          miniLogo.addClass('enlarge');
        }, 400);

        miniLogo.each(function () {
          alert(rotation);
        });

        setTimeout(function () {
          miniLogo.css({
            'transform': 'rotate(' + rotation + 'deg)'
          });
        }, 800);

        setTimeout(function () {
          miniLogo.removeClass('enlarge');
        }, 1200);
      }
    }
  });
});