현지화된 읽기 가이드
vercel-react-view-transitions목적, 사용법 및 출처
React의 View Transition API를 사용하여 부드럽고 자연스러운 느낌의 애니메이션을 구현하는 방법 안내 component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, startViewTransition, ViewTransition, 전환 유형 또는 타사 애니메이션 라이브러리 없이 React에서 UI 상태 간 애니메이션을 구현하는 방법에 대한 질문입니다.
출처 검색됨:
- 소스 저장소
- vercel-labs/agent-skills
- SKILL.md
skills/react-view-transitions/SKILL.md- 저장소 Star
- 33,269
- 저장소 최근 업데이트
- 2026-10-29
- 능력 분류
- 개발
- 최근 수집 시간
라이선스: 명시되지 않음
워크플로 발췌본은 이해를 돕기 위한 자료이며, Codez에서 제공하는 실행 가능한 명령어가 아닙니다. 이 페이지를 생성하는 데 타사 Skill은 사용되지 않았습니다.
아래의 목적 및 워크플로 관련 내용은 읽기 쉽도록 정리 및 번역된 상위 자료입니다. 이는 별도로 분류된 Codez 편집 분석과는 별개입니다.
이 스킬의 기능
React의 View Transition API를 사용하여 부드럽고 자연스러운 느낌의 애니메이션을 구현하는 방법 안내 component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, startViewTransition, ViewTransition, 전환 유형 또는 타사 애니메이션 라이브러리 없이 React에서 UI 상태 간 애니메이션을 구현하는 방법에 대한 질문입니다.
업스트림 워크플로우 작동 방식
구현 워크플로
기존 앱에 뷰 전환 효과를 추가할 때는 다음 단계를 따르세요.references/implementation.md단계별로 진행하세요. 감사부터 시작하세요. 이 단계를 건너뛰지 마세요. 사용하세요.references/css-recipes.md적용 가능한 CSS를 찾아 앱에 맞게 수정합니다.
상류 통로 · L51 ↗애니메이션을 언제 적용해야 할까요?
모든 태그는 공간적 관계 또는 연속성을 전달해야 합니다. 전달하고자 하는 바를 명확하게 설명할 수 없다면 추가하지 마세요. 다음 목록에 있는 모든 적용 가능한 패턴을 아래 순서대로 구현하세요. 이 목록은 구현 순서이며, "하나만 선택"하는 목록이 아닙니다. 앱에 적합한 모든 패턴을 구현하세요. 앱에 해당 패턴이 필요하지 않은 경우에만 패턴을 건너뛰세요.
React 뷰 전환
브라우저의 기본 애니메이션 기능을 사용하여 UI 상태 간 애니메이션을 구현합니다.document.startViewTransition를 사용하여 *무엇*을 선언하세요., trigger *when* with 전환 시작 / 지연값 사용 / CSS 클래스를 사용하여 '긴장감'을 *어떻게* 조절할 수 있을까요? 지원되지 않는 브라우저는 애니메이션을 자연스럽게 건너뜁니다.
import { ViewTransition } from 'react';
<ViewTransition>
<Component />
</ViewTransition>요구 사항 및 설정
이 파일에서 간략한 요구사항 구절이 선택되지 않았습니다. 이는 해당 스킬에 종속성이 없다는 의미는 아닙니다. 저장소 설정 지침 및 참조 파일을 확인하십시오.
제한 사항 및 품질 검사
중첩 VT 제한
부모 VT가 있을 때mounts/unmounts내부에 중첩된 VT가 있는 하나의 유닛으로서, 중첩된 VT는 자체적으로 발화하지 않습니다.enter/exit— 가장 바깥쪽 VT만 애니메이션됩니다. (지속적인 부모 VT 내부에 장착된 자식 VT는 실행됩니다.)enter/exit일반적으로.) 페이지 탐색 중 항목별 단계별 애니메이션은 현재 사용할 수 없습니다.Next.js상위 실험 상태에 대한 문제 해결 가이드를 참조하십시오.
상류 통로 · L304 ↗안전한 시험 사용부터 시작하세요
- 지원되는 호스트와 저장소 설치 지침을 확인하세요. 스킬 디렉토리와 해당 디렉토리에서 참조하는 스크립트, 자산 및 문서를 함께 보관하세요.SKILL.md단독으로는 종속성을 생략할 수 있습니다.
- 에이전트에 실제 입력값, 원하는 출력값 및 승인 기준을 제공하십시오. 호출 구문 및 사용 가능한 도구는 호스트에 따라 다르므로 이 사이트는 범용 설치 명령을 제공하지 않습니다.
- 원본 워크플로를 임시 프로젝트 또는 복사본에서 테스트해 보세요. 파일, 원격 서비스 또는 유료 리소스를 변경하는 작업은 허용하기 전에 검토하십시오.
- 출력 결과를 원본 품질 검사 및 자체 요구 사항에 맞춰 검증하십시오. 트리거가 성공적으로 작동했거나 저장소의 별점 수가 높다고 해서 반드시 올바른 결과가 나오는 것은 아닙니다.
원문에서 더 자세한 내용을 읽어보세요.
관련 기술
번역 및 범위
이 독서 안내서는 고정된 상류 지역에서 발췌한 구절들을 소개합니다.SKILL.md본 번역은 보조 번역이며, 완전한 설명서 또는 호환성 테스트를 보장하는 것은 아닙니다. 사용 전에 원본 및 참조 파일을 반드시 읽어 주십시오.
이 소개글은 아래 고정된 버전을 참조하며, 현재 저장소 활동 및 수집 시간은 별도로 표시됩니다.
- 고정된 소스
- 원문을 읽어보세요 ↗
- 출처 검색됨
- 소스 커밋
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62- 출처 SHA-256
693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a