전환 매개변수: node duration delay
유연한 전환 함수를 위해 node와 매개변수 객체를 받습니다.
전환 매개변수: node duration delay은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
함수 시그니처
사용자 지정 트랜지션은 유연성을 위해 (node, params)를 받습니다.
node 읽기
node를 사용하여 현재 크기나 위치와 같은 속성을 계산하십시오.
const rect = node.getBoundingClientRect();매개변수 전달
사용자는 지시문과 함께 params를 전달합니다.
<p transition:spin={{ duration: 800 }}>...기본값
매개변수가 누락된 경우 함수 내부에서 기본값으로 처리하십시오.
function spin(node, { duration = 600 } = {}) { ... }반응형 매개변수
트랜지션이 진행 중일 때 매개변수가 변경되어도 트랜지션이 다시 실행되지는 않습니다. 다음 마운트에서 새 값을 사용합니다.
계산된 지속 시간
타자기 효과에서 단어 길이를 사용하는 것처럼 데이터에서 지속 시간을 계산할 수 있습니다.
이징 매개변수
사용자가 곡선을 사용자 지정할 수 있도록 이징 매개변수를 받으십시오.
지연 시간 매개변수
인덱스에서 계산한 지연 시간을 전달하여 요소가 차례로 나타나게 하십시오.
{#each items as item, i}
<p transition:fly={{ delay: i * 50 }}>{item}</p>
{/each}CSS 문자열 작성 팁
조합 가능한 변환을 반환하고, top/left처럼 레이아웃을 반복 계산하게 만드는 속성은 피하십시오.
성능
매끄러운 애니메이션을 위해 transform과 opacity를 사용하십시오.
테스트
브라우저 DevTools를 사용하여 트랜지션 중 계산된 스타일을 검사하십시오.
빠른 확인
params 객체는 무엇을 제공합니까?
복습
유연한 트랜지션을 위해 params를 받고 사용하십시오. 누락된 값에는 기본값을 제공하십시오.
자주 묻는 질문
“전환 매개변수: node duration delay” 강의는 무료인가요?
네 — “전환 매개변수: node duration delay” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“전환 매개변수: node duration delay”에서 뭘 배우나요?
유연한 전환 함수를 위해 node와 매개변수 객체를 받습니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“전환 매개변수: node duration delay” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 사용자 지정 전환 함수 작성하기
- 전환 매개변수: node duration delay
- 형태가 변하는 전환 만들기
- CSS 전환과 JS 전환 비교