CSSトランジションは一方向でのみ動作します

Question

ボタンを最初にクリックしたときにトランジションが動作する理由を知っている人は誰でも知っていますか？2秒後にテキストが消えます。しかし、テキストが隠された後にもう一度ボタンをクリックすると2sekの後にも表示されるはずです。しかし、私はそれをクリックすると、テキストがすぐに表示されます。

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は： https://codepen.io/anon/pen/QqeNrW

ありがとう：

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

私はこのためのペンを作成しました！ドキュメントから

Answer 1

：

視認性：のいずれかの値が表示されている場合、別個のステップとして、補間されたタイミング関数の可視および他の値を0と1の間のタイミングマップ関数の値（遷移の開始/終了時にのみ、または[0、1]以外のY値を持つcubic-bezier（）関数の結果として、より近いエンドポイントにマップされます。どちらの値も表示されていない場合は補間できません。

そこで、視認性が0から1に、そう言って、起こっている、中間ステップで0と1

の間にいくつかの値となる。しかし、全てフラクショナリ値が可視にマッピングされますこれはあなたが見る効果を生み出します。代わり設定遷移期間の

は、遷移遅延時間を設定し、それが期待どおりに動作する

$('.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>