Transition 기초

일단 기본 코드 작성 - 박스가 좌우로 이동하는 코드

css

.box {
	width: 100px;
    height: 100px;
    background-color: coral;
    transition: 1s;
}

.box-action {
	transform: translateX(300px);
	background-color: blue;
}

html

<div class="box"></div>

javascript

const box = document.querySelector('.box');
box.addEventListener('click', () => {
	box.classList.toggle('box-action');
});

실행결과

transition의 각각의 속성

• transition-duration: transition이 전부 실행되기까지 걸리는 시간
• transition-timing-function: transition 효과의 속도 곡선을 정의
• transition-delay: transition을 수행할때까지 걸리는 delay 시간
• transition-property: transition을 적용할 속성을 지정(ex. transform, background-color 등등)
  * transition-behavior: 값은 normal, allow-discreate가 있지만 현재 포스팅일(24.03.20) 기준 최신 css업데이트 인듯하여 나중에 알아보기로..

transition-timing-function 파헤치기

이 속성을 어떻게 주느냐에 따라 천차만별의 효과가 나타난다.

1. 개발자 도구 열기
2. transition-timing-function 속성의 보라색 아이콘 클릭
   
3. 원하는 효과 설정하기
4. 작성된 cubic-bazier() 긁어서 transition 코드에 복붙
   • x축은 시간의 흐름
   • y축은 값

.box {
	width: 100px;
	height: 100px;
	background-color: coral;
	transition: 1s cubic-bezier(0.18, -0.44, 0.6, 1.32);
}

실행결과

각 사이드에서 띠요옹~ 하는 효과(?)가 들어감

속성마다 다르게 transition주는 방법은 쉼표(,)로 구분하기

.box {
	width: 100px;
	height: 100px;
	background-color: coral;
	transition: 
		transform 1s cubic-bezier(0.18, -0.44, 0.6, 1.32),
		background-color 1s 3s ease;
}

실행결과

클릭함과동시에 1초만에 이동, 클릭함과 동시에 3초 후 1초만에 색변경이 이루어짐

transition의 이벤트 받기

• transition의 이벤트에는 start, end, run, cancel이 있다.

box.addEventListener('transitionstart', e => {
	console.log(`${e.propertyName} START`);
});

box.addEventListener('transitionend', e => {
	console.log(`${e.propertyName} END`);
});

box.addEventListener('transitionrun', e => {
	console.log(`${e.propertyName} RUN`);
});

box.addEventListener('transitioncancel', e => {
	console.log(`${e.propertyName} CANCEL`);
});

-실행결과-
background-color RUN
transform RUN
transform START
transform END
background-color START
background-color END

클릭함과 동시에 두개의(background-color, transform) 속성값의 transition이 RUN
transform이 먼저 START되고 1초만에 END됨
그 이후 3초경과후 background-color가 START되고 1초만에 END가 찍힘.

그럼 cancel은 언제 사용하지...?
-> 컴포넌트가 애니메이션 도중에 없어지면 cancel이 발동함 (ex. box.remove())

<참고 사이트>
인프런 1분코딩-웹 애니메이션의 새로운 표준, Web Animations API