While this question shares similarities with the one found at Use CSS3 transitions with gradient backgrounds, there is a key difference that makes the answers provided on that thread unsuitable for addressing the issue described here.
In the code snippet below, you'll see a menu button with a background featuring a linear gradient. The intention is for the middle line of this button to fade away when clicked. However, instead of smoothly fading, it abruptly disappears. This unexpected behavior is not what I had in mind. You can view the example either below or through this JSFiddle link
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;
...
/bt-menu>When my previous attempts failed to achieve the desired effect, I turned to solutions offered in the linked question. Unfortunately, these also did not provide a satisfactory result as elaborated upon below.
The Opacity Approach
This strategy was ineffective as utilizing pseudo elements :before and :after caused all three lines to simultaneously fade out instead of just the middle line.
The background-position Approach
This method simply did not yield the expected outcome, though the reason behind this eludes me.
I am seeking assistance in resolving the issue of the middle line failing to fade out properly upon clicking the menu button.