CSS transition only working in one direction - css

Question

does anybody know why the transition is working when I first click the button, then the text disappears after 2s. But it should also show up after 2sek when i click the button again after the text has been hidden. But when I click it, the text appears immediately.
HTML:
<div class="container">
<button class="button">Hit me</button>
<div class="wrapper">
<div class="title-bar">This is the title</div>
</div>
</div>
CSS:
.container .title-bar {
visibility: visible;
-webkit-transition: visibility 2s;
transition: visibility 2s;
}
.container.fixed .title-bar {
visibility: hidden;
-webkit-transition: visibility 2s;
transition: visibility 2s;
}
JS:
$('.button').click(function() {
if ($('.container').hasClass('fixed')) {
$('.container').removeClass('fixed');
} else {
$('.container').addClass('fixed');
}
});
I created a pen for this:
https://codepen.io/anon/pen/QqeNrW
Thanks!

Answer 1

From the docs:
visibility: if one of the values is visible, interpolated as a discrete step where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with Y values outside of [0, 1]) map to the closer endpoint; if neither value is visible then not interpolable.
So, the visibility is going , so to say, from 0 to 1, and in the intermediate steps will be some value between 0 and 1.
But, all the fractionary values are mapped to visible, and this produces the effect that you see.
Instead of the setting a transition-duration, set a transition-delay and it will work as expected
$('.button').click(function() {
if ($('.container').hasClass('fixed')) {
$('.container').removeClass('fixed');
} else {
$('.container').addClass('fixed');
}
});
.container .title-bar {
visibility: visible;
-webkit-transition: visibility 2s;
transition: visibility 0s 2s;
}
.container.fixed .title-bar {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button class="button">Hit me</button>
<div class="wrapper">
<div class="title-bar">This is the title</div>
</div>
</div>