animation.toggle.js 580 bytes(minified)

CSS display 속성은 animation 또는 transition 불가능한 속성이다. 하지만 이 라이브러리(jQuery plugin)를 통해 display 상태가 변하는 요소에 애니메이션을 추가할 수 있다. 원리는 애니메이션 진행 전후로 display 속성을 처리하도록 하고 애니메이션 진행중에는 display 속성을 표시 상태가 되도록 유지한다.

이 라이브러리는 인라인 스타일로 CSS를 제어하지 않으며, 오직 CSS 선택자만 조작하기 때문에 "보기, 감추기, 애니메이션" 스타일은 모두 CSS 선택자로 처리해야 한다.

애니메이션을 사용하지 않는 일반적인 토글 예제

$(document).on("click", ".fade-btn", function () {
    $(this).parent().toggleClass("show"); // 클래스를 제어하는 방식.
}
$(document).on("click", ".fade-btn", function () {
    $(this).next().toggle(); // 인라인 스타일을 제어하는 방식.
}

이 라이브러리가 제안하는 애니메이션 토글 예제

DEMO

fade 콘텐츠
scale 콘텐츠

HTML

<div class="fade">
    <button type="button" class="fade__btn">fade 버튼</button> // 애니메이션 버튼.
    <output class="fade__cnt">fade 콘텐츠</output> // 애니메이션 콘텐츠.
</div>
<div class="scale">
    <button type="button" class="scale__btn">scale 버튼</button> // 애니메이션 버튼.
    <output class="scale__cnt">scale 콘텐츠</output> // 애니메이션 콘텐츠.
</div>

CSS

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.fade__cnt{ display: none; }
.fade__cnt--live{ display: inline-block; }
.fade__cnt--show{ animation: fadeIn .4s; }
.fade__cnt--hide{ animation: fadeOut .4s; }

@keyframes scaleUp {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
@keyframes scaleDown {
    from { transform: scale(1); }
    to { transform: scale(0); }
}
.scale__cnt{ display: none; }
.scale__cnt--live{ display: inline-block; }
.scale__cnt--show{ animation: scaleUp .4s; }
.scale__cnt--hide{ animation: scaleDown .4s; }

JavaScript

$(document).on("click", ".fade__btn", function () {
    $(this).next().animation({
        liveClass: "fade__cnt--live", // 필수. 클래스 이름 사용자 정의.
        showClass: "fade__cnt--show", // 필수. 클래스 이름 사용자 정의.
        hideClass: "fade__cnt--hide" // 필수. 클래스 이름 사용자 정의.
    });
});

$(document).on("click", ".scale__btn", function () {
    $(this).next().animation({
        liveClass: "scale__cnt--live", // 필수. 클래스 이름 사용자 정의.
        showClass: "scale__cnt--show", // 필수. 클래스 이름 사용자 정의.
        hideClass: "scale__cnt--hide" // 필수. 클래스 이름 사용자 정의.
    });
});

API

animation() 플러그인에 객체 형식으로 넘길 수 있는 속성과 값.
Parameter Type Default Description
actionType string - 보기 "show" 또는 감추기 "hide" 사용 가능. 보기/감추기 상태를 토글하려면 생략한다.
liveClass string - 애니메이션 실행하는 동안 유지하는 클래스. CSS animation 속성 값에 명시한 시간만큼 유지한다.
showClass string - 애니메이션 요소 표시하는 동안 유지하는 클래스. CSS animation 속성 값에 명시한 시간만큼 유지한다.
hideClass string - 애니메이션 요소 감추는 동안 유지하는 클래스. CSS animation 속성 값에 명시한 시간만큼 유지한다.