트랜지션
트랜지션 (Transition)
CSS 트랜지션을 Javascript에서 쉽게 쓰도록 감싸 주는 모듈이에요. 크로스브라우저 콜백, 고급 큐잉, 기능 감지를 제공해 요소를 부드럽게 나타나고 사라지게 할 수 있어요.
출처: 문서
본문
트랜지션 (Transitions)
스케일 (Scale)
요소가 보기 안팎으로 확대·축소될 수 있어요.
$('.autumn.leaf')
.transition('scale')
;
줌 (Zoom)
요소가 멀리서 확대되어 보기로 들어올 수 있어요.
$('.autumn.leaf')
.transition('zoom')
;
페이드 (Fade)
요소가 내려가며 또는 올라가며 서서히 나타나거나 사라질 수 있어요.
$('.autumn.leaf')
.transition('fade')
;
$('.autumn.leaf')
.transition('fade up')
;
$('.autumn.leaf')
.transition('fade down')
;
$('.autumn.leaf')
.transition('fade left')
;
$('.autumn.leaf')
.transition('fade right')
;
플립 (Flip)
요소가 세로 또는 가로로 뒤집히며 보기 안팎으로 전환될 수 있어요.
$('.autumn.leaf')
.transition('horizontal flip')
;
$('.autumn.leaf')
.transition('vertical flip')
;
드롭 (Drop)
요소가 위에서 떨어지며 보기로 들어올 수 있어요.
$('.autumn.leaf')
.transition('drop')
;
플라이 (Fly)
요소가 캔버스 밖에서 날아와 들어올 수 있어요.
$('.autumn.leaf')
.transition('fly left')
;
$('.autumn.leaf')
.transition('fly right')
;
$('.autumn.leaf')
.transition('fly up')
;
$('.autumn.leaf')
.transition('fly down')
;
스윙 (Swing)
요소가 흔들리며 보기로 들어올 수 있어요.
$('.autumn.leaf')
.transition('swing left')
;
$('.autumn.leaf')
.transition('swing right')
;
$('.autumn.leaf')
.transition('swing up')
;
$('.autumn.leaf')
.transition('swing down')
;
브라우즈 (Browse)
요소가 시리즈의 일부로 나타나고 사라질 수 있어요.
$('.autumn.leaf')
.transition('browse')
;
$('.autumn.leaf')
.transition('browse right')
;
슬라이드 (Slide)
An element can appear to slide in from above or below
$('.autumn.leaf')
.transition('slide down')
;
$('.autumn.leaf')
.transition('slide up')
;
$('.autumn.leaf')
.transition('slide left')
;
$('.autumn.leaf')
.transition('slide right')
;
요소가 위나 아래에서 슬라이드되어 들어오는 것처럼 보일 수 있어요.
정적 애니메이션 (Static Animations)
정적 애니메이션 클래스 이름은 javascript로 설정할 필요 없이 추가할 수 있어요.
CSS only transition
맥동 (Pulsating)
요소가 맥동하는 가장자리를 가질 수 있어요. 원형이나 사각형 요소에서 가장 잘 동작해요.
$('.autumn.leaf')
.transition('pulsating')
;
지글 (Jiggle)
요소가 흔들려서 모양에 관심을 끌 수 있어요.
$('.autumn.leaf')
.transition('jiggle')
;
플래시 (Flash)
요소가 번쩍여 자신에게 관심을 끌 수 있어요.
$('.autumn.leaf')
.transition('flash')
;
셰이크 (Shake)
요소가 흔들려서 위치에 관심을 끌 수 있어요.
$('.autumn.leaf')
.transition('shake')
;
펄스 (Pulse)
요소가 맥동하여 보임에 주의를 끌 수 있어요.
$('.autumn.leaf')
.transition('pulse')
;
타다 (Tada)
요소가 어떤 동작에 대해 사용자에게 긍정적인 피드백을 줄 수 있어요.
$('.autumn.leaf')
.transition('tada')
;
바운스 (Bounce)
요소가 바운스되어 자신을 정중히 상기시킬 수 있어요.
$('.autumn.leaf')
.transition('bounce')
;
글로우 (Glow)
요소가 빛나 페이지에서 자신의 위치를 보여 줄 수 있어요.
$('.autumn.leaf')
.transition('glow')
;
가시성 (Visibility)
요소의 애니메이션 큐가 끝난 뒤 최종 가시성 상태가 결정돼요. 애니메이션이 바깥쪽(밖으로 나가는) 트랜지션이면 최종 가시성은 hidden이 돼요. 애니메이션이 안쪽(들어오는)이면 애니메이션 후 요소가 보이게 돼요.
$('.long.leaf.image')
.transition('scale')
;
방향 지정하기 (Specifying a direction)
애니메이션 방향을 강제하려면 애니메이션 이름에 in 또는 out을 추가하세요.
$('.long.leaf.image')
// if a direction if specified it will be obeyed
.transition('horizontal flip in')
.transition('vertical flip in')
;
자동 방향 (Automatic Direction)
애니메이션 방향이 지정되지 않으면 요소의 현재 가시성에 따라 자동으로 결정돼요. 예를 들어 요소가 보이면 "fade out" 애니메이션이 호출되고, 보이지 않으면 "fade in"이 호출돼요.
$('.long.leaf.image')
// fade up out is used if available
.transition('fade up')
// this is now fade up in
.transition('fade up')
;
그룹 트랜지션 (Grouped Transitions)
애니메이션 간격 (Animation Intervals)
그룹에서 여러 항목을 애니메이션할 때 각 항목이 차례로 나타나도록 interval을 사용하고 싶을 수 있어요.
$('.jiggle.images .image')
.transition({
animation : 'jiggle',
duration : 800,
interval : 200
})
;
애니메이션 순서 (Animation Order)
요소 그룹을 숨길 때 기본 설정은 reverse: 'auto'를 사용해요. 이는 요소를 숨길 때 레이아웃 리플로우를 피하기 위해 애니메이션 순서를 뒤에서 앞으로 자동으로 역전시켜요. 요소를 표시할 때는 정상 순서로 돌아가요.
$('.sequenced.images .image')
.transition({
animation : 'scale',
reverse : 'auto', // default setting
interval : 200
})
;
순서 강제하기 (Forcing Order)
애니메이션 방향과 관계없이 역전 애니메이션을 직접 강제해야 한다면 reverse: true를 사용할 수 있어요.
$('.reverse.images .image')
.transition({
animation : 'pulse',
reverse : true,
interval : 200
})
;
정적 애니메이션 (Static Animations)
in이나 out 애니메이션이 정의되지 않은 애니메이션은 실행 후 현재 가시성을 유지해요.
$('.long.leaf.image')
.transition('pulse')
;
반복 (Looping)
looping을 설정하면 애니메이션 루프를 제어할 수 있어요. 콜백은 각 루프 주기 후에 발생해요.
$('.long.leaf.image')
.transition('set looping')
.transition('bounce', '2000ms')
;
$('.long.leaf.image')
.transition('remove looping')
;
소개 (Introduction)
UI Transitions는 CSS 트랜지션을 Javascript에서 사용하도록 감싸 주며, 크로스브라우저 콜백, 고급 큐잉, 기능 감지를 제공해요.
트랜지션은 드롭다운이나 모달 같은 다른 ui 모듈과 느슨하게 결합되어 요소 트랜지션을 제공해요.
유형 (Types)
트랜지션은 세 가지 범주로 나뉘어요. 안쪽(들어오는) 트랜지션, 바깥쪽(나가는) 트랜지션, 정적 트랜지션이에요. 이 세 범주는 애니메이션 완료 후 요소의 가시성을 결정해요.
사용법 (Usage)
초기화 (Initializing)
인자 없이 트랜지션을 호출하면 모든 기본 설정이 사용돼요.
$('.green.leaf')
// default everything
.transition()
;
설정 전달하기 (Passing in settings)
트랜지션은 animate와 유사한 인자 축약 표기를 사용해요. 같은 인자를 사용해 콜백 함수, 애니메이션 지속 시간, 기타 설정을 지정할 수 있어요. 지속 시간은 CSS 축약 표기의 문자열 또는 숫자로 지정할 수 있어요.
$('.green.leaf')
.transition({
animation : 'scale',
duration : '2s',
onComplete : function() {
alert('done');
}
})
;
표시 유형 (Display Type)
애니메이션은 block 레벨 요소뿐 아니라 모든 표시 유형에서 사용할 수 있어요. 예를 들어 버튼의 inline-block 상태를 유지하면서 애니메이션할 수 있어요.
$('.test.button')
.transition('horizontal flip', '500ms')
;
Sign-up
애니메이션 큐잉 (Queuing animations)
순서대로 호출된 애니메이션은 큐에 쌓여요. 큐에 있는 모든 애니메이션은 방향이 지정되지 않으면 트랜지션 방향을 자동으로 결정해요.
$('.green.leaf')
.transition('horizontal flip', '500ms')
.transition('horizontal flip', 500, function() {
alert('done!');
})
;
애니메이션 멈추기 (Stopping Animations)
애니메이션은 세 가지 방법으로 멈출 수 있어요. stop은 현재 애니메이션을 끝내고, stop all은 애니메이션을 끝내고 큐에 있는 애니메이션을 제거하며, clear queue는 현재 재생은 계속하되 큐에 있는 애니메이션을 제거해요.
// only first horizontal flip cancelled
$('.green.leaf')
.transition('horizontal flip')
.transition('horizontal flip')
.transition('horizontal flip')
.transition('stop')
.transition('vertical flip')
;
// all horizontal flip cancelled
$('.green.leaf')
.transition('horizontal flip')
.transition('horizontal flip')
.transition('horizontal flip')
.transition('stop all')
.transition('vertical flip')
;
// all queued animations cancelled
$('.green.leaf')
.transition('horizontal flip')
.transition('horizontal flip')
.transition('vertical flip')
.transition('clear queue')
;
트랜지션 없이 숨기기/보이기 (Hide/Show Without Transition)
트랜지션의 show와 hide 동작을 사용해 애니메이션 없이 콘텐츠를 숨기거나 보이게 할 수 있어요. 이는 애니메이션처럼 요소의 flex나 table-cell 같은 표시 유형을 보존해요.
트랜지션은 요소의 최종 표시 상태가 `block`이 아니거나, 인라인 오버라이드 없이 요소를 숨길 수 없을 때만 인라인 스타일을 사용해요.
$('.demo.table tr:last-child')
.transition('toggle')
;
$('.demo.table td:last-child')
.transition('hide')
;
동작 (Behavior)
다음 모든 동작은 다음 구문으로 호출할 수 있어요:
$('.your.element')
.transition('behavior name', argumentOne, argumentTwo)
;
Behavior / Description
stop
현재 애니메이션을 멈추고 큐를 보존해요.
stop all
현재 애니메이션과 큐에 있는 애니메이션을 멈춰요.
clear queue
큐에 있는 모든 애니메이션을 지워요.
show
현재 애니메이션을 멈추고 요소를 보이게 해요.
hide
현재 애니메이션을 멈추고 요소를 숨겨요.
toggle
숨기기와 보이기 사이를 토글해요.
force repaint
더 비싸지만 안정적인 방법으로 리플로우를 강제해요.
repaint
요소에 리플로우를 트리거해요.
reset
트랜지션 중 변경된 모든 조건을 초기화해요.
set looping
애니메이션 반복을 활성화해요.
remove looping
요소에서 반복 상태를 제거해요.
disable
비활성 상태를 추가해요 (애니메이션 능력 정지).
enable
비활성 상태를 제거해요.
set duration(duration)
요소의 애니메이션 지속 시간을 수정해요.
save conditions
모든 클래스 이름과 스타일을 캐시에 저장해 애니메이션 후 다시 가져오게 해요.
restore conditions
캐시된 이름과 스타일을 요소에 다시 추가해요.
is visible
요소가 현재 보이는지 여부를 반환해요.
is animating
트랜지션이 현재 진행 중인지 여부를 반환해요.
is looping
애니메이션 반복이 설정되었는지 여부를 반환해요.
is supported
애니메이션 지원 여부를 반환해요.
destroy
인스턴스를 파괴하고 모든 이벤트를 제거해요.
트랜지션 설정 (Transition Settings)
폼 설정이 트랜지션 동작을 수정해요.
Setting / Default / Description
animation
fade
사용할 이름 있는 애니메이션 이벤트예요. CSS에 정의되어야 해요.
interval
0
각 요소 트랜지션 사이의 간격(ms)이에요.
reverse
auto
간격이 지정될 때 애니메이션의 순서를 설정해요. `auto`는 숨기는 애니메이션만 역전시켜요.
displayType
false
최종 표시 유형(block, inline-block 등)을 지정해서 계산하지 않게 해요.
duration
false
CSS 트랜지션 애니메이션의 지속 시간이에요.
useFailSafe
true
활성화하면 요소가 숨겨져 있어도 `animationend` 콜백이 발생하도록 `timeout`이 추가돼요.
failSafeDelay
100
페일 세이프를 위한 지연(ms)이에요.
allowRepeats
false
활성화하면 이미 진행 중인 동안에도 같은 애니메이션을 큐에 넣을 수 있게 해요.
queue
true
다른 애니메이션이 진행 중일 때 애니메이션을 자동으로 큐에 넣을지 여부예요.
skipInlineHidden
false
처음에 인라인으로 숨겨진 객체를 트랜지션에서 건너뛸지 여부예요. 자식 객체에 대해서도 트랜지션을 수행하지만, 부모가 애니메이션되는 동안 인라인으로 숨겨진 자식(`style="display:none;"`으로 정의된)을 계속 숨겨 두고 싶을 때 유용해요. [Accordion](/modules/accordion.html)이 이를 사용해요.
콜백 (Callbacks)
콜백은 특정 동작 이후에 실행할 함수를 지정해요.
Setting / Context / Description
onShow
transitioned element
가시성을 shown으로 바꾸는 각 트랜지션에서의 콜백이에요. 이 콜백에서 `false`를 반환하면 트랜지션 표시가 취소돼요.
onBeforeShow(showFunction)
transitioned element
show 트랜지션이 시작되기 직전의 콜백이에요. showFunction 매개변수를 콜백 안에서 호출해 트랜지션 표시를 트리거해야 해요.
onVisible
transitioned element
show 트랜지션이 끝난 후의 콜백이에요.
onHide
transitioned element
가시성을 hidden으로 바꾸는 각 트랜지션에서의 콜백이에요. 이 콜백에서 `false`를 반환하면 트랜지션 숨김이 취소돼요.
onBeforeHide(hideFunction)
transitioned element
hide 트랜지션이 시작되기 직전의 콜백이에요. hideFunction 매개변수를 콜백 안에서 호출해 트랜지션 숨김을 트리거해야 해요.
onHidden
transitioned element
트랜지션 숨김이 끝난 후의 콜백이에요.
onStart
transitioned element
애니메이션 시작 시의 콜백으로, 큐에 있는 애니메이션에 유용해요.
onComplete
transitioned element
각 트랜지션 완료 시의 콜백이에요.
DOM 설정 (DOM Settings)
DOM 설정은 이 모듈이 DOM과 어떻게 상호작용할지 지정해요.
Setting / Default / Description
namespace
transition
이벤트 네임스페이스예요. 모듈 해제가 요소에 붙은 다른 이벤트에 영향을 주지 않게 해요.
className
className : { animating : 'animating', disabled : 'disabled', hidden : 'hidden', inward : 'in', loading : 'loading', looping : 'looping', outward : 'out', transition : 'transition', visible : 'visible' }
상태에 스타일을 붙이는 데 사용되는 클래스 이름들이에요.
디버그 설정 (Debug Settings)
디버그 설정은 콘솔의 디버그 출력을 제어해요.
Setting / Default / Description
name
Transition
디버그 로그에서 사용되는 이름이에요.
silent
false
다른 디버그 설정과 관계없이 오류 메시지를 포함한 모든 콘솔 출력을 잠재워요.
debug
false
콘솔에 표준 디버그 출력을 제공해요.
performance
true
콘솔에 표준 디버그 출력을 제공해요.
verbose
false
콘솔에 보조 디버그 출력을 제공해요.
errors
errors : { noAnimation : 'There is no CSS animation matching the one you specified.', method : 'The method you called is not defined', support : 'This browser does not support CSS animations' }