使用具有渐变背景的CSS3过渡以及伪元素之前和之后

Question

这个问题类似于Use CSS3 transitions with gradient backgrounds但是有一个很大的不同，它使得这个例子的链接问题的答案无法使用。

在下面的代码示例中，我有一个菜单按钮，其背景由线性渐变组成。单击此按钮时，中间线应该消失;然而，它不会消失，而是立即消失。这不是我追求的效果。您可以在下方或JSFiddle

中查看

＆＃13;

＆＃13;

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;");

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我上面的尝试没有工作时，我开始尝试实现上面链接的问题的答案。但是，这些并没有起作用，我将在下面解释。

不透明度方法
这不起作用，因为我使用伪元素: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>