CSS
css+js)display:none 애니메이션 효과
Kale_coding
2022. 5. 16. 15:12
HTML
<div class="trigger">클릭하면 display:none을 block로 변경</div>
<div class="hidden">display:none/block 처리 될 영역</div>
CSS
.hidden {
display: none;
}
.appear {
animation: fade-in 1s;
animation-fill-mode: forwards;
display: block;
}
.disappear {
animation: fade-out 1s;
animation-fill-mode: forwards;
}
@keyframes fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fade-out {
from {opacity: 1;}
to {opacity: 0;}
}
JS
const button = document.querySelector('.trigger');
const onOffBox = document.querySelector('.hidden');
button.addEventListener('click', function(){
if(onOffBox.classList.contains('hidden')){
onOffBox.classList.remove('hidden','disappear');
onOffBox.classList.add('appear');
} else {
onOffBox.classList.add('hidden','disappear');
setTimeout(function(){onOffBox.classList.remove('appear')},1000);
}
});
참고 사이트