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>