2

This question is similar to Use CSS3 transitions with gradient backgrounds however there is one big difference which renders the answers unusable on the linked question for this example.

In the following code example, I have a menu button which has a background consisting of a linear gradient. When this button is clicked on the middle line should fade away; however, instead of fading away, it instantly disappears. This is not the effect I was after. You can see it below or in this 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>

When my attempts above didn't work I started trying to implement answers to the question linked above. However, these didn't work as I will explain below.

The Opacity Approach
This did not work as I used the pseudo elements :before and :after to create the rotating lines. This meant when using this approach all three lines faded out instead of just the middle one.

The background-position Approach
This appeared to just not work. I am afraid I have no better explanation to as why.

I would appreciate any help in fixing the fade out on the middle line when it is clicked.

Community
  • 1
  • 1
Dan
  • 7,286
  • 6
  • 49
  • 114

1 Answers1

0

It turns out that there is a simple solution for this example. Make the span transparent, but not the :before and :after pseudo-elements. Then add a div which overlays the span. After you have done this you can give the div a desired background gradient and then fade its opacity out. This will leave the span unaffected and provide the desired result.

For example by changing the HTMLto something such as

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

And the SCSS to something like

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

Provides this working example

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>
Dan
  • 7,286
  • 6
  • 49
  • 114