UI 애니메이션 넣기
- 가능하면 CSS만으로 처리하는게 좋다.
(성능 때문)
UI 애니메이션 만드는 법칙
one-way 애니메이션
: A상태 -> B상태로 이동하는 애니메이션
(상이 서서히 선명해짐, 버튼이 왼쪽에서 오른쪽으로 이동함 등)
- 시작 스타일 class 생성
- 최종 스타일 class 생성
- 원할 때 최종 스타일로 변하도록 구현
- transition 추가
- transition: CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법
CSS 애니메이션 기능
-
visibility: hidden;: 모습만 숨김 (애니메이션에 사용)
(=display: none;: 아예 없앰) -
visibility: visible;: 모습을 보임
(=display: block;) -
opacity: 0;: 투명도
(0: 투명, 1: 불투명, 0.5: 반투명) -
transition: all 2s;: 모든 css스타일 속성이 2초에 걸쳐서 서서히 변경
모달창이 서서히 선명해지도록 만들기
- 시작 스타일 class: .black-bg
- 최종 스타일 class: .show-modal
- 원할 때 최종 스타일로 변하도록 구현
- transition 추가: .black-bg
<!DOCTYPE html>
<html lang="en">
<head>
<link href="main.css" rel="stylesheet" />
<title>Hello, world!</title>
</head>
<body>
<!--모달창 html, css-->
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<button class="btn btn-danger" id="close">닫기</button>
</div>
</div>
<button id="login">로그인</button>
<script>
document.getElementById("login").addEventListener("click", function () {
document.querySelector('.black-bg').classList.add('show-modal');
});
document.getElementById("close").addEventListener("click", function () {
document.querySelector('.black-bg').classList.remove('show-modal');
});
</script>
</body>
</html>css파일
.black-bg {
/* 시작 스타일 */
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
z-index: 5;
padding: 30px;
visibility: hidden;
/* display: none; : 아예 없앰
visibility: hidden; : 모습만 숨김 (애니메이션에 사용)
visibility: visible; : 모습을 보임 (= display: block;)
*/
opacity: 0;
/* opacity: 0; // 투명도: 0:투명, 1:불투명, 0.5:반투명 */
transition: all 1s;
/* transition: all 1s; : 모든 css스타일 속성이 1초에 걸쳐서 서서히 변경 */
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
.show-modal {
/* 최종 스타일 */
visibility: visible;
opacity: 1;
}
서브메뉴가 슬라이드로 열리고 닫히는 애니메이션
- 서브메뉴의 height 속성 조절하기 (overflow: hidden 사용)
jQuery 버전
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link href="main.css" rel="stylesheet" />
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Question</span>
<button class="navbar-toggler" type="button">
<!--Navbar 버튼-->
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<!--jQuery 구문-->
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
<script>
$(".navbar-toggler").on("click", function () {
$(".list-group").slideToggle("show");
});
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>css파일
.list-group {
display: none;
}
.show {
display: block;
}참조
코딩애플
비전공자 개발 일기