jquery - 如何使移动菜单转换为 "backwards"？

Question

我正在尝试为移动菜单制作动画，因此当点击它时三条纹应该变成“X”，当关闭菜单时它应该恢复为三条纹。 “X”的动画效果非常好，但关闭时它会跳回三条纹，而不是平滑地过渡回它。这是因为我当然完全删除了 x 类，但我无法弄清楚我将如何“向后”过渡。

到目前为止，这是我的代码:

HTML:

<button id="nav-toggle">
  <span class="toggle-pin"></span>
  <span class="toggle-pin"></span>
  <span class="toggle-pin"></span>
</button>

CSS(萨斯):

#nav-toggle {
  position: relative;
  z-index: 9000;
  float: right;
  margin: 15px 15px 0 0;
  background-color: transparent;
  border: none;
  outline: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;

  @include respondFrom(widescreen) {
    display: none;
  }

  .toggle-pin {
    width: 34px;
    height: 4px;
    background: palette();
    display: block;
    margin: 5px 0;
    border-radius: 5px;
  }

  &.x {

    .toggle-pin {
      margin: 11px 0;
    }

    .toggle-pin:nth-child(1) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-transition: -webkit-transform .4s;
      transition: transform .4s;
    }

    .toggle-pin:nth-child(2) {
      opacity: 0;
      -webkit-transition: opacity .3s;
      transition: opacity .3s;
    }

    .toggle-pin:nth-child(3) {
      margin-top: -30px;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-transition: -webkit-transform .4s;
      transition: transform .4s;
    }
  }
}

切换脚本:

$navToggle.on('click', function() {

  if ($navToggle.hasClass('x')) {
    $navToggle.removeClass('x');
  }
  else {
    $navToggle.addClass('x');
  }
});

Answer 1

只需默认定义转换:

SCSS

#nav-toggle {
  position: relative;
  z-index: 9000;
  float: right;
  margin: 15px 15px 0 0;
  background-color: transparent;
  border: none;
  outline: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  cursor: pointer;

  @include respondFrom(widescreen) {
    display: none;
  }

  .toggle-pin {
    width: 34px;
    height: 4px;
    background: red;
    display: block;
    margin: 5px 0;
    border-radius: 5px;

    &:nth-child(1) {
      -webkit-transition: -webkit-transform .4s;
      transition: transform .4s;
    }
    &:nth-child(2) {
      -webkit-transition: opacity .3s;
      transition: opacity .3s;
    }
    &:nth-child(3) {
      -webkit-transition: -webkit-transform .4s;
      transition: transform .4s;
    }
  }

  &.x {
    .toggle-pin {
      margin: 11px 0;

      &:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:nth-child(3) {
        margin-top: -30px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
    }
  }
}

http://jsfiddle.net/vinzcelavi/d7uawp67/