애니메이션을 사용하여 화면 요소를 이동하면 사용자가 UI를 이해하고 사용자 경험을 향상시킬 수 있습니다.
animate 버튼을 눌렀을 때 animate가 true가 되도록 만들어 동적으로 클래스를 추가할 수 있도록 했습니다.
animateBlock() 메소드 내부 this.animatedBlock = true; 쓰다.
그리고 애니메이션 CSS를 작성하십시오.
애니메이션 CSS에서 CSS 변환 속성을 사용합니다.
X축에서 -50px만큼 이동했습니다.
자연스럽게 움직여 봅시다.
먼저 전환하려면 CSS 속성 값이 필요합니다. 변형 속성을 변경했다는 것을 알고 있으므로 대상에 변형 속성을 설정해도 괜찮습니다. 블록 기본 클래스의 초기 값에는 변환 속성이 없지만 이미 translateX()가 설정되어 있습니다. 변환 속성에 적용되는 변경 사항이나 변환 속성이 적용되는 변경 사항을 애니메이션화하도록 CSS에 지시합니다. 애니메이션 효과가 지속되는 시간도 지정해야 합니다. 0.3초로 설정하겠습니다. 그리고 -50px는 너무 짧으니 -150px로 하자.
CSS 애니메이션 이해
@keyframes를 사용하여 애니메이션 작동 방식을 자세히 정의할 수 있습니다.
필요에 따라 여러 상태를 백분율로 표현할 수 있습니다. 스케일은 블록 크기를 변경할 수 있는 일종의 변환 기능입니다.
적절한 CSS 클래스가 요소에 추가되면 이 속성을 사용하여 애니메이션을 추가합니다. 정의한 키프레임 중 하나를 참조해야 하므로 아래에 지정한 이름인 Slide-Fade를 입력합니다.
애니메이션 동작 후 원래 상태로 돌아가는 것을 볼 수 있습니다.
버그가 아니라 CSS 애니메이션의 기본 동작입니다.
Forward를 추가하면 CSS의 마지막 키프레임, 즉 마지막 상태가 애니메이션 요소의 새 상태로 설정됩니다.
이렇게 변경할 수 있습니다.
편집 * 모델이 아닌 모달로 전환
“단지 CSS”만으로는 충분하지 않은 이유
지금은 팝업이 사라집니다. 문제는 요소가 DOM과 분리되어 있다는 것입니다. 이 경우 CSS로 애니메이션을 적용할 수 없습니다. 팝업 창은 즉시 제거되기 때문에 애니메이션이 완료된 후 브라우저에서 팝업 창을 제거할 수 없습니다. 하지만 사라질 때 애니메이션을 적용하려면 그렇게 할 수 있어야 합니다.
이 문제는 Vue로 해결할 수 있습니다.
vue는 요소가 나타날 때 애니메이션을 적용할 수도 있습니다. 사라질 때도 사용할 수 있습니다.
애니메이션이 끝날 때까지 사라지는 것을 지연시킵니다.
Vue를 통해 나타나고 사라지는 요소의 애니메이션을 제어하는 데 사용할 수 있는 요소를 래핑하는 내장 구성 요소가 있습니다. 그것은 하나입니다
애니메이션이 필요한 요소는 다음으로 변환됩니다.
이 전환 구성 요소를 통해 래핑된 요소를 조작할 수 있습니다.
전환 구성 요소에는 직계 자식이라는 하나의 요소만 있습니다.
나중에 예외가 발생하겠지만 지금은 직계 자식이 한 명뿐이라는 점을 기억하세요.
Vue는 기본적으로 이 세 가지 CSS 클래스를 추가하며 설명된 대로 요소가 DOM에 처음 추가될 때 한 가지 차이점이 추가됩니다.
V-입력 활성 부분
Transition이라는 CSS 속성을 추가하여 모든 CSS 속성에 애니메이션이 필요하고 시간을 정의한다는 사실을 모두에게 알릴 수 있습니다. 이 기간은 vue에서 읽습니다.
페이지에 전환 구성 요소가 여러 개 있으면 어떻게 됩니까?
트랜지션 컴포넌트에 name=”para”라고 쓰면
Para-Enter-From, Para-Enter-Active 및 Para-Enter-To 클래스는 Vue에서 추가로 관리하고 분석합니다.
전환에는 직계 자식이 하나만 있습니다.
전환에는 직계 자식이 하나만 있다고 말했습니다. 그러나 예외가 있습니다.
v-if 및 v-else를 사용하면 두 자녀를 가질 수 있습니다.
클릭할 때마다 상대방이 보이도록 작성
또한 CSS를 작성하십시오.
이렇게 하면 두 버튼이 동시에 표시되도록 순서를 설정할 수 있습니다.
전환에 모드를 추가하면 In-Out 및 Out-In의 두 가지 모드가 있습니다.
인아웃이 먼저 생성되는 것 같습니다. 이건 매번 알아봐야 할 것 같아요. 그래서 아웃인으로 바꿔서 적용했습니다.
애니메이션이 완료될 때까지 afteEnter가 호출되지 않습니다.
목록 애니메이션
이 li 요소를 애니메이션 추가 및 제거 요소(li)로 전환하는 전환으로 래핑합니다.
전환 그룹 구성 요소가 있습니다. 이름에서 알 수 있듯이 이 구성 요소는 여러 요소에 적용될 수도 있습니다. 여러 요소를 동시에 애니메이션화할 수도 있습니다.
목록의 항목과 한 번에 여러 항목에 애니메이션을 적용하여 직접적인 영향을 받지 않는 항목, 즉 추가 및 삭제되지 않은 항목의 움직임을 부드럽게 합니다.
.user-list-move는 말더듬을 줄입니다.
경로 간 애니메이션
수명 주기 후크를 사용하지 않고 두 페이지 사이에 애니메이션을 삽입하는 방법을 살펴보고 있습니다.
이렇게하고 페이지를 입력하십시오.
하지만 그렇지 않습니다.
vue3이기 때문에
vue2에서는 작동하지만 vue3에서는 작동하지 않습니다. 하지만 방법이 있습니다.
이제 전환이 라우터 보기로 이동해야 합니다. 하지만 여기서 끝나지 않습니다. 라우터 보기
내부적으로 렌더링할 콘텐츠 가져오기를 지원하므로 활성화된 경로에 따라 실제 페이지, 즉 실제 구성 요소가 렌더링되는 위치도 지정해야 합니다.
이는 라우터 보기를 통해 슬롯 구문을 설정하여 내부적으로 수행할 수 있습니다. 일반적으로 필요하지 않으나 경로와 트랜지션을 함께 사용하는 경우 필요합니다.
즉, slotProps에는 현재 선택된 경로에 의해 로드될 컴포넌트를 포함하는 “Component”라는 속성이 있습니다.
경로 링크를 클릭하면 두 개의 구성 요소가 표시됩니다.
페이지에 하나의 구성 요소만 표시되도록 허용합니다.
모드가 있었습니다. 아웃 인을 씁니다. 경로에서 페이드 버튼으로 이름이 변경되었습니다.
경로 애니메이션을 적용할 때 애니메이션은 페이지가 처음 로드될 때도 재생됩니다.
첫 번째 애니메이션이 있습니다.
엄밀히 말하면 그 이유는 라우터 보기에 있습니다.
첫 번째 활성 경로가 빈 경로(/)이기 때문입니다. 페이지가 시작될 때, 즉 페이지가 처음으로 로드될 때
URL에 지정된 경로로 사용되는 경로로 즉시 변환됩니다. 앱이 시작될 때
경로가 없을 때 라우터 보기 지정된 경로의 경로로 이동하는 것을 의미합니다.
빈 컴포넌트에서 적재된 컴포넌트로의 이동이 일어나기 때문에 애니메이션이 재생됩니다.
이 동작을 수정하려면 라우터를 등록한 main.js로 이동하세요.
라우터에서 isReady 메서드를 호출하기만 하면 됩니다.
이 방법은 적절한 페이지가 로드되고 라우터에서 성공적으로 확인되면 알려줍니다. 확정이 있으니 그때 전화를 드려야죠
이 then 블록에 함수를 전달하면 이 함수 덕분에 라우터는 빈 페이지에서 선택할 페이지로 이동하는 대신 로드해야 하는 페이지를 인식하여 초기 전환을 피합니다. 라우터가 완전히 설정되고 로드할 페이지를 알게 된 후에만 앱을 마운트하고 렌더링하도록 함수 내부에 앱을 마운트하기만 하면 됩니다.