Javascript 将CSS3变换与带有前后伪元素的渐变背景一起使用

这个问题类似于，但是有一个很大的区别，这使得本例中链接问题的答案不可用

---

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

var-toggleOpenClose=0；
变量菜单按钮=$（“#bt菜单”）；
菜单按钮。单击（函数（）{
如果（toggleOpenClose%2==0）{
menuButton.removeClass（'bt-menu-close'）.addClass（'bt-menu-open'）；
menuButton.children（“.bt菜单触发器”）.children（“span”）.removeClass（“关闭”）.addClass（“打开”）；
}否则{
menuButton.removeClass（'bt-menu-open'）.addClass（'bt-menu-close'）；
menuButton.children（“.bt菜单触发器”）.children（“span”）.removeClass（“打开”）.addClass（“关闭”）；
}
切换OpenClose++；
});
var时间=1；
var时间短滑动=0.8；
document.styleSheets[0].addRule（“.bt菜单触发器span.open”，“转换：后台”+timeShortSlide+”s；转换延迟：“+（time-timeShortSlide）+”s；”；
document.styleSheets[0].addRule（“.bt菜单触发器span.open:before”，“transition:transform”+timeShortSlide+”s；transition delay:“+（time-timeShortSlide）+”s；”；
document.styleSheets[0].addRule（“.bt菜单触发器span.open:after”，“转换：转换”+timeShortSlide+”s；转换延迟：“+（time-timeShortSlide）+”s；”；
document.styleSheets[0].addRule（“.bt菜单触发器span.close”，“转换：后台”+timeShortSlide+“s；”）；
document.styleSheets[0].addRule（“.bt菜单触发器span.close:before”，“transition:transform”+timeShortSlide+“s；”）；
document.styleSheets[0].addRule（“.bt菜单触发器span.close:after”，“transition:transform”+timeShortSlide+“s；”）
*{
保证金：0；
填充：0；
}
.bt菜单{
宽度：50px；
}
.bt菜单.bt菜单触发器{
位置：固定；
顶部：0px；
左：0px；
显示：块；
宽度：50px；
高度：50px；
光标：指针；
}
.bt菜单.bt菜单触发范围{
位置：绝对位置；
最高：50%；
左：0；
显示：块；
宽度：100%；
高度：4px；
页边顶部：-2px；
背景：adadff；
背景：-webkit线性渐变（左，蓝色，透明）；
背景：-莫兹线性梯度（左，蓝色，透明）；
背景：-o-线性梯度（左，蓝色，透明）；
背景：线性渐变（左，蓝色，透明）；
字体大小：0px；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.bt菜单.bt菜单触发器范围：之前.bt菜单.bt菜单触发器范围：之后{
位置：绝对位置；
左：0；
宽度：100%；
身高：100%；
背景：adadff；
背景：-webkit线性渐变（左，蓝色，透明）；
背景：-莫兹线性梯度（左，蓝色，透明）；
背景：-o-线性梯度（左，蓝色，透明）；
背景：线性渐变（左，蓝色，透明）；
内容：''；
}
.bt菜单.bt菜单触发器范围：之前{
-webkit转换：translateY（-250%）；
-莫兹变换：translateY（-250%）；
-o-变换：translateY（-250%）；
转换：translateY（-250%）；
}
.bt菜单.bt菜单触发范围：之后{
-webkit转换：translateY（250%）；
-moz变换：translateY（250%）；
-o变换：translateY（250%）；
转化：translateY（250%）；
}
.bt-menu.bt-menu-open.bt菜单触发器范围：之前{
-webkit变换：平移（0）旋转（45度）；
-moz变换：平移（0）旋转（45度）；
-o变换：平移（0）旋转（45度）；
变换：平移（0）旋转（45度）；
}
.bt-menu.bt-menu-open.bt菜单触发器范围：之后{
-webkit变换：translateY（0）旋转（-45度）；
-moz变换：translateY（0）旋转（-45度）；
-o变换：平移Y（0）旋转（-45度）；
变换：translateY（0）旋转（-45度）；
}
.bt-menu.bt-menu-open.bt菜单触发范围{
背景：透明；
}
这个例子有一个简单的解决方案。使跨度透明，但不要使伪元素前后的
:before
和
:before
透明。然后添加一个覆盖跨度的div。完成此操作后，可以为div提供所需的背景渐变，然后淡出其不透明度。这将使跨度不受影响，并提供所需的结果

例如，通过将HTMLto更改为

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

提供了这个工作示例


var-toggleOpenClose=0；
变量菜单按钮=$（“#bt菜单”）；
菜单按钮。单击（函数（）{
如果（toggleOpenClose%2==0）{
menuButton.removeClass（'bt-menu-close'）.addClass（'bt-menu-open'）；
menuButton.children（“.bt菜单触发器”）.children（“span”）.removeClass（“关闭”）.addClass（“打开”）；
}否则{
menuButton.removeClass（'bt-menu-open'）.addClass（'bt-menu-close'）；
menuButton.children（“.bt菜单触发器”）.children（“span”）.removeClass（“打开”）.addClass（“关闭”）；
}
切换OpenClose++；
});
var时间=1；
var时间短滑动=0.8；
document.styleSheets[0].addRule（“.bt菜单触发器span div”，“转换：不透明度”+（timeShortSlide*0.75）+”s；转换延迟：“+（time-timeShortSlide）+”s；”；
document.styleSheets[0].addRule（“.bt菜单触发器span.open:before”，“transition:transform”+timeShortSlide+”s；transition delay:“+（time-timeShortSlide）+”s；”；
document.styleSheets[0].addRule（“.bt菜单触发器span.open:after”，“转换：转换”+timeShortSlide+”s；转换延迟：“+（time-timeShortSlide）+”s；”；
document.styleSheets[0].addRule（“.bt菜单触发器span.close:before”，“transition:transform”+timeShortSlide+“s；”）；
document.styleSheets[0].addRule（“.bt菜单触发器span.close:after”，“transition:transform”+timeShortSlide+“s；”）
*{
保证金：0；
填充：0；
}
.bt菜单{
宽度：50px；
}
.bt
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;
    }
  }
}