231221 개발일지 TIL - [JS]Modal 애니메이션 구현(아래에서 위로 올라오는 효과)

setTimeout 함수는 첫 번째 인자로 전달된 함수를 두 번째 인자로 전달된 시간(ms) 후에 실행한다. 이를 통해 display 속성 변경과 transform 속성 변경 사이에 시간 간격을 두어 자연스러운 애니메이션 효과를 얻을 수 있다.

주의사항
setTimeout 함수를 사용할 때 비동기적으로 동작하기 때문에, setTimeout 함수 내의 코드가 실행되는 동안 다른 코드가 실행될 수 있으므로 setTimeout 함수를 사용할 때는 코드의 실행 순서를 잘 고려하여 작성해야 한다.

html

		<div class="sp_vbox tac">
			<button type="button" id="myBtn" class="btn_medium wset">버튼</button>
		</div>

		<div id="myModal" class="modal">
			<div class="modal-content">
				<span class="close">&times;</span>
				<p>여기에 모달 내용을 넣어주세요.</p>
			</div>
		</div>

		<button id="myBtn">모달 열기</button>

css

                .btn_medium.wset {
                    width: 100%;
                }

            /* modal */
                .modal {
                    display: none;
                    position: fixed;
                    z-index: 2;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100%;
                    overflow: auto;
                    background-color: rgba(0,0,0,0.4);
                }

                .modal-content {
                    background-color: #fefefe;
                    margin: auto;
                    padding: 20px;
                    border: 1px solid #888;
                    width: calc(100% - 40px);
                    min-height: 50%;
                    position: absolute;
                    bottom: 0;
                    -webkit-transform: translateY(100%);
                    transform: translateY(100%);
                    -webkit-transition: -webkit-transform 1s ease-out;
                    transition: transform 1s ease-out;
                }

                .modal-content.show {
                    -webkit-transform: translateY(0);
                    transform: translateY(0);
                }

js

const modal = document.getElementById("myModal");
const btn = document.getElementById("myBtn");
const span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
	modal.style.display = "block";
	setTimeout(function(){
		modal.querySelector('.modal-content').classList.add('show');
	}, 50);
}

span.onclick = function() {
	modal.querySelector('.modal-content').classList.remove('show');
	setTimeout(function(){
		modal.style.display = "none";
	}, 1000);
}

window.onclick = function(event) {
	if (event.target == modal) {
		modal.querySelector('.modal-content').classList.remove('show');
		setTimeout(function(){
			modal.style.display = "none";
		}, 1000);
	}
}