Question

我环顾四周，但找不到其他人遇到类似事情。

正如标题所述，当父元素从绝对位置变为固定位置时，我在变换过渡中会出现一个奇怪的“小故障”（在Chrome中看起来完全正常）。

以为如果有人在此之前找到了解决此问题的方法，我会把它扔进去。

操作系统：OS X El Capitan
Firefox版本：51.0.1

Codepen：http://codepen.io/anon/pen/dNmJPK

HTML：

<div class="menu">
  <button id="btn-menu" type="button">
    <span class="menu-bars"></span>
  </button>
</div>

SCSS：

#btn-menu {
  position: absolute;
  z-index: 100;
  top: 50px;
  right: 30px;
  height: 49px;
  width: 49px;
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
  transition: .5s;
  transform: translate(0, -50%);
  border: 3px solid #000;
  border-radius: 10px;

  &:focus {
    outline: none;
  }

  .menu-open & {
    border-color: transparent;
    position: fixed;
  }

  .menu-bars {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 21px;
    height: 3px;
    background-color: #000;
    transition: .3s;

    &:before, &:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      transition: .3s;
    }

    &:before {
      top: -10px;
      transform-origin: 0 0;
    }

    &:after {
      bottom: -10px;
      transform-origin: 0 100%;
    }

    .menu-open & {
      background-color: transparent;

      &:before {
        top: -7px;
        transform: rotate(45deg);
      }

      &:after {
        bottom: -7px;
        transform: rotate(-45deg);
      }
    }
  }
}

JQuery的：

// Open/close menu
$('#btn-menu').on('click', function() {
  $('.menu').toggleClass('menu-open');
});

Answer 1

感谢@MichaelCoker提供的使用变换而不是顶部，底部的解决方案。请参阅下面的更新代码。

http://codepen.io/anon/pen/xgWpQa

    &:before {
        transform: translate(0, -10px);
    }

    &:after {
        transform: translate(0, 10px);
    }

    .menu-open & {
        background-color: transparent;

        &:before {
            transform: rotate(45deg);
        }

        &:after {
            transform: rotate(-45deg);
        }
    }

当父元素从绝对变为固定时，Firefox中的Glitchy变换转换

1 个答案: