SCSS

Question

我试图动画移动菜单，所以当点击它时，三个条纹应变成＆＃39; X＆＃39;并且当关闭菜单时它应该恢复为三个条纹。动画到＆＃39; X＆＃39;效果很好但是当它关闭时它只是跳回到三条纹而不是平滑地过渡回它。这是因为我当然完全删除了x课程，但我无法弄清楚我将如何实际转换＆＃34;向后＆＃34; ..

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

HTML：

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

CSS（sass）：

#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/

如何进行移动菜单转换＆＃34;向后＆＃34;？

1 个答案:

SCSS