javascript - 在伪元素之前和之后使用具有渐变背景的 CSS3 过渡

Question

这个问题类似于Use CSS3 transitions with gradient backgrounds然而，有一个很大的区别，导致此示例的链接问题的答案无法使用。

---

在下面的代码示例中，我有一个菜单按钮，其背景由线性渐变组成。当点击这个按钮时，中间的线应该消失；但是，它并没有消失，而是立即消失了。这不是我想要的效果。您可以在下面或此 JSFiddle 中看到它

var toggleOpenClose = 0;
var menuButton = $("#bt-menu");

menuButton.click(function() {
  if(toggleOpenClose % 2 == 0) {
    menuButton.removeClass('bt-menu-close').addClass('bt-menu-open');
    menuButton.children(".bt-menu-trigger").children("span").removeClass("close").addClass("open");
  } else {
    menuButton.removeClass('bt-menu-open').addClass('bt-menu-close');
    menuButton.children(".bt-menu-trigger").children("span").removeClass("open").addClass("close");
  }

  toggleOpenClose++;
});

var time = 1;
var timeShortSlide = 0.8;

document.styleSheets[0].addRule(".bt-menu-trigger span.open", "transition: background " + timeShortSlide + "s; transition-delay: " + (time - timeShortSlide) + "s;");
document.styleSheets[0].addRule(".bt-menu-trigger span.open:before", "transition: transform " + timeShortSlide + "s; transition-delay: " + (time - timeShortSlide) + "s;");
document.styleSheets[0].addRule(".bt-menu-trigger span.open:after", "transition: transform " + timeShortSlide + "s; transition-delay: " + (time - timeShortSlide) + "s;");
document.styleSheets[0].addRule(".bt-menu-trigger span.close", "transition: background " + timeShortSlide + "s;");
document.styleSheets[0].addRule(".bt-menu-trigger span.close:before", "transition: transform " + timeShortSlide + "s;");
document.styleSheets[0].addRule(".bt-menu-trigger span.close:after", "transition: transform " + timeShortSlide + "s;");

* {
  margin: 0;
  padding: 0;
}

.bt-menu {
  width: 50px;
}
.bt-menu .bt-menu-trigger {
  position: fixed;
  top: 0px;
  left: 0px;
  display: block;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.bt-menu .bt-menu-trigger span {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  margin-top: -2px;
  background: #adadff;
  background: -webkit-linear-gradient(left, blue, transparent);
  background: -moz-linear-gradient(left, blue, transparent);
  background: -o-linear-gradient(left, blue, transparent);
  background: linear-gradient(left, blue, transparent);
  font-size: 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bt-menu .bt-menu-trigger span:before, .bt-menu .bt-menu-trigger span:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: #adadff;
  background: -webkit-linear-gradient(left, blue, transparent);
  background: -moz-linear-gradient(left, blue, transparent);
  background: -o-linear-gradient(left, blue, transparent);
  background: linear-gradient(left, blue, transparent);
  content: '';
}
.bt-menu .bt-menu-trigger span:before {
  -webkit-transform: translateY(-250%);
  -moz-transform: translateY(-250%);
  -o-transform: translateY(-250%);
  transform: translateY(-250%);
}
.bt-menu .bt-menu-trigger span:after {
  -webkit-transform: translateY(250%);
  -moz-transform: translateY(250%);
  -o-transform: translateY(250%);
  transform: translateY(250%);
}
.bt-menu.bt-menu-open .bt-menu-trigger span:before {
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
.bt-menu.bt-menu-open .bt-menu-trigger span:after {
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
}
.bt-menu.bt-menu-open .bt-menu-trigger span {
  background: transparent;
}

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>

<nav id="bt-menu" class="bt-menu">
  <a href="#" class="bt-menu-trigger"><span></span></a>
</nav>

当我上面的尝试没有奏效时，我开始尝试实现上面链接的问题的答案。然而，这些都不起作用，我将在下面解释。

不透明度方法
这没有用，因为我使用了伪元素 :before 和 :after 来创建旋转线。这意味着当使用这种方法时，所有三行都会淡出，而不仅仅是中间的一行。

background-position 方法
这似乎行不通。恐怕我没有更好的解释来解释为什么。

如果您能帮助我解决点击中间线上的淡出问题，我将不胜感激。

Answer 1

事实证明，这个例子有一个简单的解决方案。使跨度透明，但不是 :before 和 :after 伪元素。然后添加一个覆盖跨度的 div。完成此操作后，您可以为 div 提供所需的背景渐变，然后淡出其不透明度。这将使跨度不受影响并提供所需的结果。

例如，通过将 HTML 更改为类似的内容

<nav id="bt-menu" class="bt-menu">
    <a href="#" class="bt-menu-trigger"><span><div></div></span></a>
</nav>

还有 SCSS 之类的东西

span {
  background: transparent;

  div {
    @include linear(#adadff, left, blue, transparent);
    float: left;
    height: 100%;
    width: 100%;
    opacity: 1;
  }
}

&.bt-menu-open {
  .bt-menu-trigger span {
    div {
      opacity: 0;
    }
  }
}

提供这个工作示例

var toggleOpenClose = 0;
var menuButton = $("#bt-menu");

menuButton.click(function() {
  if(toggleOpenClose % 2 == 0) {
    menuButton.removeClass('bt-menu-close').addClass('bt-menu-open');
    menuButton.children(".bt-menu-trigger").children("span").removeClass("close").addClass("open");
  } else {
    menuButton.removeClass('bt-menu-open').addClass('bt-menu-close');
    menuButton.children(".bt-menu-trigger").children("span").removeClass("open").addClass("close");
  }

  toggleOpenClose++;
});

var time = 1;
var timeShortSlide = 0.8;

document.styleSheets[0].addRule(".bt-menu-trigger span div", "transition: opacity " + (timeShortSlide * 0.75) + "s; transition-delay: " + (time - timeShortSlide) + "s;");
document.styleSheets[0].addRule(".bt-menu-trigger span.open:before", "transition: transform " + timeShortSlide + "s; transition-delay: " + (time - timeShortSlide) + "s;");
document.styleSheets[0].addRule(".bt-menu-trigger span.open:after", "transition: transform " + timeShortSlide + "s; transition-delay: " + (time - timeShortSlide) + "s;");
document.styleSheets[0].addRule(".bt-menu-trigger span.close:before", "transition: transform " + timeShortSlide + "s;");
document.styleSheets[0].addRule(".bt-menu-trigger span.close:after", "transition: transform " + timeShortSlide + "s;");

* {
  margin: 0;
  padding: 0;
}

.bt-menu {
  width: 50px;
}
.bt-menu .bt-menu-trigger {
  position: fixed;
  top: 0px;
  left: 0px;
  display: block;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.bt-menu .bt-menu-trigger span {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  margin-top: -2px;
  background: transparent;
  font-size: 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bt-menu .bt-menu-trigger span:before, .bt-menu .bt-menu-trigger span:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: #adadff;
  background: -webkit-linear-gradient(left, blue, transparent);
  background: -moz-linear-gradient(left, blue, transparent);
  background: -o-linear-gradient(left, blue, transparent);
  background: linear-gradient(left, blue, transparent);
  content: '';
}
.bt-menu .bt-menu-trigger span:before {
  -webkit-transform: translateY(-250%);
  -moz-transform: translateY(-250%);
  -o-transform: translateY(-250%);
  transform: translateY(-250%);
}
.bt-menu .bt-menu-trigger span:after {
  -webkit-transform: translateY(250%);
  -moz-transform: translateY(250%);
  -o-transform: translateY(250%);
  transform: translateY(250%);
}
.bt-menu.bt-menu-open .bt-menu-trigger span:before {
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
.bt-menu.bt-menu-open .bt-menu-trigger span:after {
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
}
.bt-menu.bt-menu-open .bt-menu-trigger span div {
  opacity: 0;
}
.bt-menu .bt-menu-trigger span div {
  background: #adadff;
  background: -webkit-linear-gradient(left, blue, transparent);
  background: -moz-linear-gradient(left, blue, transparent);
  background: -o-linear-gradient(left, blue, transparent);
  background: linear-gradient(left, blue, transparent);
  float: left;
  height: 100%;
  width: 100%;
  opacity: 1;
}

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>

<nav id="bt-menu" class="bt-menu">
  <a href="#" class="bt-menu-trigger"><span><div></div></span></a>
</nav>