간단하게 CSS의 Keyframes와 Vanilla JavaScript를 활용한 fadeIn, fadeOut 효과를 만드는 방법을 기록한다.
Preview
HTML
<button class="fadeIn-button">fadeIn</button>
<div class="hidden-layer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur fugiat perspiciatis excepturi tenetur, corrupti delectus nisi illo incidunt optio nobis modi quisquam alias ad eveniet dolor quam voluptatem, numquam aut?</div>
<hr>
<button class="fadeOut-button">fadeOut</button>
<div class="show-layer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sed eius sint, totam repellat consequatur quaerat, ullam officia esse, necessitatibus cupiditate atque. Eveniet voluptatibus maiores nemo quia blanditiis quas excepturi?</div>fadeIn / Out 효과를 위해 버튼과 효과용 레이어를 추가했다.
CSS
/* fadeIn */
.hidden-layer {
display: none;
margin-top: 10px;
}
.fadeIn {
display: block;
animation: fadeIn 0.3s forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* fadeOut */
.show-layer {
margin-top: 10px;
}
.fadeOut {
animation: fadeOut 0.3s forwards;
}
@keyframes fadeOut {
100% {
opacity: 0;
}
}기본적으로 숨겨져 있어야 하는 .hidden-layer에는 display: none;을 적용했다.
JavaScript
// fadeIn
const fadeInButton = document.querySelector('.fadeIn-button');
const hiddenLayer = document.querySelector('.hidden-layer');
fadeInButton.addEventListener('click', e => {
hiddenLayer.classList.add('fadeIn');
});
// fadeOut
const fadeOutButton = document.querySelector('.fadeOut-button');
const showLayer = document.querySelector('.show-layer');
fadeOutButton.addEventListener('click', e => {
showLayer.classList.add('fadeOut');
// Change display to none when fadeOut animation is finished
showLayer.addEventListener('animationend', () => {
showLayer.style.display = 'none';
});
});fadeInButton 변수의 버튼을 누르면 .hidden-layer에 fadeIn 이라는 class를 추가한다.
fadeOutButton 변수의 버튼을 누르면 .show-layer에 fadeOut 이라는 class를 추가하고
CSS Animation이 종료되면 JavaScript의 animationend 이벤트를 사용해 .show-layer에 display: none;을 추가해서 레이어가 숨게 했다.
EOD
다른 방법이 많을텐데 jQuery 없이 간단하게 만들 수 있는 방법은 없을까 고민하다 생각해봤다.
Toggle 되게 만드는것도 좋을듯.