8. 간단한 애니메이션

UI에 간단한 애니메이션을 추가하려면 가능하면 css로 처리해주는것이 좋다

-> 성능때문

 

    <button class="modal-btn">로그인</button>
    <!-- UI에 애니메이션을 추가하려면 가능하면 css로 처리하는게 좋음 (성능때문) -->

    <div class="modal">
        <div class="white-bg">
            <h4>로그인하세요</h4>
            <button class="btn btn-danger" id="close">닫기</button>
        </div>
    </div>

/* 
one-wqy 애니메이션
1. 시작스타일
2. 최종스타일
3. 원할때 최종스타일로 변하라고 코드를 만듬
4. transition 추가 */


.modal{
    width: 300px;
    height: 100px;
    border: 1px solid #333;
    border-radius: 10px;
    background-color: #333;
    margin-top: 20px;

    opacity: 0; /* 완전투명 */
    visibility: hidden; /* display:none과 같음 */

    transition: all 1s; /* 변할때 1초 걸려서 서서히 실행 */

}

.show-modal{
    visibility: visible;
    opacity: 1;
}

.modal h4{
    margin-top: 20px;
    margin-left: 20px;
    color: aliceblue;
}

.btn.btn-danger{
    padding: 5px 10px;
    background-color: #fff;
    border: none;
    border-radius: 5px;
    margin-left: 20px;
}

      $('.modal-btn').on('click',function(){
            $('.modal').addClass('show-modal');
        })

        $('.btn-danger').on('click',function(){
            $('.modal').removeClass('show-modal');
        })