1. 기본 사용법
<Transition>내장된 컴포넌트이므로 등록 없이 다른 컴포넌트에서 사용할 수 있습니다. 기본 슬롯을 통해 전달된 요소나 구성 요소에 시작 및 종료 애니메이션을 적용할 수 있습니다. 진입 또는 퇴장은 다음 조건 중 하나에 의해 트리거될 수 있습니다.
- 다음에 의해
v-if트리거된 토글 - 다음에 의해
v-show트리거된 토글 - 특수 요소로
<component>전환되는 동적 구성요소
디지털 관리 플랫폼
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue 권한 시스템 사례
개인 블로그 주소
1.1 가장 기본적인 사용법의 예
<template>
<button @click="show = !show">Toggle</button>
<Transition>
<p v-if="show">hello</p>
</Transition>
</template>
<style scoped>
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>
<Transition>단일 요소 또는 구성 요소만 슬롯 콘텐츠로 지원됩니다. 콘텐츠가 구성 요소인 경우 구성 요소에는 루트 요소가 하나만 있어야 합니다.
기본 CSS 전환 및 기본 CSS 애니메이션 과 함께 사용하면 보다 섬세한 애니메이션 표시 효과를 얻을 수 있습니다.
전환 및 애니메이션 이벤트는
transitionend또는 를 통해 들을 수 있습니다 .animationend
1.2 몇 가지 추가 설명
type 속성을 통해 Vue가 어떤 유형을 관리해야 하는지 명시적으로 알릴 수 있습니다. 전달된 값은 animationor 입니다 transition. animation이는 또는 중 하나 를 사용할 때 transition유용합니다.
<Transition type="animation">...</Transition>
노드가 처음 렌더링될 때 전환 효과를 적용하려면 appear소품을 추가하면 됩니다.
<Transition appear>...</Transition>
전환 모드는 mode 속성을 통해 지정할 수 있습니다. 속성 값은 in-out다음과 같습니다.out-in
<Transition mode="out-in">...</Transition>
깊은 수준의 CSS 선택기를 사용하여 깊게 중첩된 요소에 전환 효과를 트리거합니다.
<template>
<Transition name="nested">
<div v-if="show" class="outer">
<div class="inner">
Hello
</div>
</div>
</Transition>
</tempalte>
<style scoped>
/* 应用于嵌套元素的规则 */
.nested-enter-active .inner,
.nested-leave-active .inner {
transition: all 0.3s ease-in-out;
}
.nested-enter-from .inner,
.nested-leave-to .inner {
transform: translateX(30px);
opacity: 0;
}
/* ... 省略了其他必要的 CSS */
</style>
duration전환 기간(밀리초)은 속성을 통해 명시적으로 지정할 수 있습니다.
<Transition :duration="550">...</Transition>
2. CSS 전환 클래스
진입 및 퇴장 전환 효과에 사용되는 CSS 클래스는 총 6개입니다.
![[외부 링크 이미지 전송에 실패했습니다. 원본 사이트에 안티 리칭 메커니즘이 있을 수 있습니다. 이미지를 저장하고 직접 업로드하는 것이 좋습니다(img-PXJDdyNJ-1677935958172)(Vue3 코스 노트 소개.assets/transition-classes.f0f7b3c9 .png)]](https://img-blog.csdnimg.cn/1c25a8bfbcc644979b3638e3e41b2d9e.png)
v-enter-from: 애니메이션 시작 상태를 입력합니다. 요소가 삽입되기 전에 추가되고 요소가 삽입된 후 다음 프레임에서 제거됩니다.v-enter-active: 애니메이션의 유효 상태를 입력합니다. 진입 애니메이션 단계 전체에 적용됩니다. 요소가 삽입되기 전에 추가되고 전환 또는 애니메이션이 완료된 후 제거됩니다. 이 클래스는 진입 애니메이션의 지속 시간, 지연 및 속도 곡선 유형을 정의하는 데 사용할 수 있습니다.v-enter-to: 애니메이션 종료 상태를 입력합니다.v-enter-from요소가 삽입된 후(즉 , 제거되는 동시에) 다음 프레임에 추가되고 전환 또는 애니메이션이 완료된 후 제거됩니다.v-leave-from: 애니메이션의 시작 상태를 그대로 둡니다. 이탈 전환 효과가 발동되면 즉시 추가되고, 한 프레임 후에 제거됩니다.v-leave-active: 애니메이션을 그대로 둡니다. 전체 퇴장 애니메이션 단계에 적용됩니다. 이탈 전환 효과가 트리거될 때 즉시 추가되고, 전환 또는 애니메이션이 완료된 후 제거됩니다. 이 클래스는 종료 애니메이션의 지속 시간, 지연 및 속도 곡선 유형을 정의하는 데 사용할 수 있습니다.v-leave-to: 애니메이션의 종료상태를 그대로 둡니다. 나가기 애니메이션이 트리거된 후(즉,v-leave-from제거되는 동시에) 다음 프레임을 추가하고 전환 또는 애니메이션이 완료된 후에 제거됩니다.
<template>
<button @click='flag = !flag'>切换</button>
<transition>
<div v-if='flag' class="box"></div>
</transition>
</template>
<style scoped>
// 开始过渡
.v-enter-from{
background:red;
width:0px;
height:0px;
transform:rotate(360deg)
}
// 开始过渡了
.v-enter-active{
transition: all 2.5s linear;
}
// 过渡完成
.v-enter-to{
background:yellow;
width:200px;
height:200px;
}
// 离开的过渡
.v-leave-from{
width:200px;
height:200px;
transform:rotate(360deg)
}
// 离开中过渡
.v-leave-active{
transition: all 1s linear;
}
// 离开完成
.v-leave-to{
width:0px;
height:0px;
}
</style>
3. 전환 효과의 이름을 지정하세요.
전환 효과 이름을 선언하기 위해 구성 요소에 소품을 <Transition>전달할 수 있습니다 .name
<Transition name="fade">
...
</Transition>
이름이 지정된 전환 효과의 경우 해당 효과에 작용하는 전환 클래스 v앞에 해당 이름이 붙습니다. 따라서 이 "페이드" 전환에 대한 클래스는 다음과 같아야 합니다.
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
4. 사용자 정의 전환 클래스
<Transition>다음 props를 전달하여 사용자 정의 전환 클래스를 지정할 수도 있습니다 .
enter-from-classenter-active-classenter-to-classleave-from-classleave-active-classleave-to-class
전달하는 클래스는 해당 단계의 기본 클래스 이름을 재정의합니다. 이 기능은 Animate.css 와 같은 Vue의 애니메이션 메커니즘 아래에 다른 타사 CSS 애니메이션 라이브러리를 통합하려는 경우 매우 유용합니다 .
animate.css 설치
npm install animate.css
main.js에 도입됨
import 'animate.css'
전환 구성 요소에 사용됨
<Transition
name="custom-classes"
enter-active-class="animate__animated animate__tada"
leave-active-class="animate__animated animate__bounceOutRight"
>
<p v-if="show">hello</p>
</Transition>
5. 전환 수명주기 후크
JavaScript에서는 <Transition>구성 요소 이벤트를 수신하여 전환 프로세스 중에 후크 기능을 중단할 수 있습니다.
<script setup>
// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el) {}
// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el, done) {
// 调用回调函数 done 表示过渡结束
// 如果与 CSS 结合使用，则这个回调是可选参数
done()
}
// 当进入过渡完成时调用。
function onAfterEnter(el) {}
function onEnterCancelled(el) {}
// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
function onBeforeLeave(el) {}
// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el, done) {
// 调用回调函数 done 表示过渡结束
// 如果与 CSS 结合使用，则这个回调是可选参数
done()
}
// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el) {}
// 仅在 v-show 过渡中可用
function onLeaveCancelled(el) {}
</script>
<template>
<Transition
@before-enter="onBeforeEnter"
@enter="onEnter"
@after-enter="onAfterEnter"
@enter-cancelled="onEnterCancelled"
@before-leave="onBeforeLeave"
@leave="onLeave"
@after-leave="onAfterLeave"
@leave-cancelled="onLeaveCancelled"
>
<!-- ... -->
</Transition>
</template>
JavaScript 전환만 사용하는 경우
enter및 후크에서 콜백을leave사용해야 합니다done. (CSS 전환의 자동 감지를 건너뛸 수 있다는 속성을 통해:css="false"Vue에 명시적으로 표시하고 약간 더 나은 성능을 제공하면 CSS 규칙이 실수로 전환 효과를 방해하는 것을 방지할 수 있습니다.)
6. 슬롯과 협력하여 재사용 가능한 전환 효과 달성
Vue의 컴포넌트 시스템 덕분에 전환 효과를 캡슐화하고 재사용할 수 있습니다. <Transition>재사용할 수 있는 전환을 만들려면 구성 요소에 대한 래퍼 구성 요소를 만들고 슬롯 콘텐츠를 전달 해야 합니다 .
<!-- MyTransition.vue -->
<script>
// JavaScript 钩子逻辑...
</script>
<template>
<!-- 包装内置的 Transition 组件 -->
<Transition
name="my-transition"
@enter="onEnter"
@leave="onLeave">
<slot></slot> <!-- 向内传递插槽内容 -->
</Transition>
</template>
<style>
/*
必要的 CSS...
注意：避免在这里使用 <style scoped>
因为那不会应用到插槽内容上
*/
</style>
이제 MyTransition가져온 후 내장 구성요소처럼 사용할 수 있습니다.
<MyTransition>
<div v-if="show">Hello</div>
</MyTransition>