애니메이션
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성되어된다.
또한, 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다.
투명도를 줘서 서서히 등장하는 애니메이션 효과를 자바스크립트를 이용하여
진행해보자
-예제 Code
$('#logBtn').on('click', function(){
$('.black-bg').fadeIn();
});위와 같이 쓰는 것보다 CSS로 처리하여 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링되며 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있다.
애니메이션 만드는 법칙
one-way UI 애니메이션은 A상태에서 B상태로 이동하는 상태를 발한다.
class로 만들면된다.
1. 시작스타일
2. 최종스타일
3. 원할 때 최종스타일로 변하기.
4. transition 추가
css style에 visibiltiy:hidden = display:none 대용이다.
CSS Code
.black-bg {width:100%;height:100%;position:fixed;visibility : hidden;background:rgba(0,0,0,0.5);z-index:5;padding:30px;opacity: 0;transition: all 1s;}
.white-bg {background: white;border-radius:5px;padding:30px;}
.show-modal {visibility:visible;opacity: 1;}HTML/JS Code
<body>
<button id="login">로그인</button>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<button class="btn btn-danger" id="close">닫기</button>
</div>
</div>
<script>
$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
});
$('#close').on('click', function(){
$('.black-bg').addClass('off');
});
</script>
</body>
3년차 퍼블리셔의 스터디