알림 활성화 / 비활성화 타원형 버튼 만들기

 

모바일 어플 개발 진행
알림 활성화 / 비활성화 버튼을 만드는 작업 진행중

 

 

작업해야할 디자인

 

 

[ HTML ]

<span class="notification-button">
    <span class="circle"></span>
</span>

 

유저가 기존에 활성화를 했던 상태라면

set 클래스명을 추가해줌

<span class="notification-button set">
    <span class="circle"></span>
</span>

 

 

 

[ CSS ]

 

기본 css

.notification-button {
    position: relative;
    display: inline-block;
    border-radius: 30% / 50%;
    width: 43px;
    height: 24px;
    background: #E6E6E6;
}
.notification-button .circle {
    position: absolute;
    top: 4px;
    left: 4px;
    display: inline-block;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background: #0E305D;
}

 

기존에 활성화되어있던 버튼은 애니메이션 효과를 주지않기 위해서 set 클래스명을 추가했다

.notification-button.set { background: #0E305D; }
.notification-button.set .circle { background: #ffffff; left: auto; right: 4px;  }

 

 활성화 시  active 클래스명이 추가되는데 앞으로 움직이는 애니메이션 실행

.notification-button.active { background: #0E305D; }
.notification-button.active .circle {
    background: #ffffff;
    animation: move 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    right: 4px;
}

 

비활성화 시 뒤로 움직이는 애니메이션 실

.active_remove {
    animation: move_remove 1s;
    animation-iteration-count: 1;
    animation-fill-mode: backwards;
    left: 4px;
}

 

사용된 애니메이션 효과

 

@keyframes move {
    0% {transform: translateX(0);}
    100% {transform: translateX(20px);}
}

@keyframes move_remove {
    0% {transform: translateX(20px);}
    100% {transform: translateX(0);}
}

 

 

[ script ]

 $(function ($) {
        $('.notification-button').on('click', function() {
            var $this = $(this);
            if ($this.hasClass('active') || $this.hasClass('set')) {
                $this.removeClass('active set');
                $this.find('.circle').addClass('active_remove');
            } else {
                $this.addClass('active');
                $this.find('.circle').removeClass('active_remove');
            }
        });
    });

 

버튼 활성화 / 비활성화 버튼 클 함수

클래스명을 사용해서 여러개 사용 가능