CSS-Übergang funktioniert nur in einer Richtung

Question

weiß jemand, warum der Übergang funktioniert, wenn ich zuerst auf den Button klicke, dann verschwindet der Text nach 2s. Aber es sollte auch nach 2sek angezeigt werden, wenn ich den Button erneut anklicke, nachdem der Text ausgeblendet wurde. Aber wenn ich darauf klicke, erscheint der Text sofort.

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

habe ich einen Stift dafür: https://codepen.io/anon/pen/QqeNrW

Dank!

Answer 1

der Dokumenten:

Sichtbarkeit: wenn einer der Werte sichtbar ist, interpoliert, als diskreter Schritt, in dem Werte der Zeitfunktion zwischen 0 und 1 Karte sichtbar und andere Werte der Zeitfunktion (die nur am Anfang/Ende des Übergangs auftreten oder als Ergebnis von kubischen Bezier() - Funktionen mit Y-Werten außerhalb von [0, 1]) auf den näheren Endpunkt abgebildet werden; wenn keiner der Werte sichtbar ist, dann nicht interpolierbar. So

, wird die Sichtbarkeit, so zu sagen, von 0 auf 1, und in den Zwischenschritten werden, sind einige Werte zwischen 0 und 1

Aber alle fractionary Werten sichtbar abgebildet und das erzeugt den Effekt, den du siehst.

Anstelle der Einstellung einer Übergangsdauer, stellen eine Übergangsverzögerung, und es wird als

$('.button').click(function() { 
 
    if ($('.container').hasClass('fixed')) { 
 
    $('.container').removeClass('fixed'); 
 
    } else { 
 
    $('.container').addClass('fixed'); 
 
    } 
 
});

.container .title-bar { 
 
    visibility: visible; 
 
    -webkit-transition: visibility 2s; 
 
\t 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>

erwartungs