타사 애니메이트를 사용한 오버 애니메이션
GitHub: https://www.npmjs.com/package/animate.css
공식 웹사이트: https://github.com/animate-css/animate.css
첫 번째 단계는 스타일 라이브러리를 설치하는 것입니다.
npm install animate.css두 번째 단계는 스타일을 도입하고 전환 또는 전환 그룹 태그의 이름 속성을 animate__animated animate__bounce로 구성하는 것입니다.
name="animate__animated animate__bounce"세 번째 단계는 전환 태그의 속성 호출을 구성하는 것입니다(구성하기 전에 효과를 시도하려면 공식 웹 사이트를 여는 것이 좋습니다). 예는 다음과 같습니다.
테스트.뷰
<template>
<div>
<p>使用第三方动画</p>
<button @click="isShow=!isShow">test 显示/隐藏</button>
<transition-group
appear
name="animate__animated animate__bounce"
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp"
>
<h1 v-show="isShow" key="1">AAA</h1>
<h1 v-show="isShow" key="2">BBB</h1>
</transition-group>
</div>
</template>
<script>
import 'animate.css' //导入第三方动画样式
export default {
name: "Test",
data(){
return {
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: orange;
}
</style>분석하다
<transition-group
appear
name="animate__animated animate__bounce"
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp"
>
<h1 v-show="isShow" key="1">AAA</h1>
<h1 v-show="isShow" key="2">BBB</h1>
</transition-group>enter-active-class 및 leave-active-class를 사용하여 CSS 애니메이션 적용
enter-active-class는 필드에 들어가는 효과를 설정하고, leave-active-class를 사용하여 필드를 나가는 효과를 설정합니다.
클래스 이름을 사용자 정의하고 다음 기능을 통해 전환 클래스 이름을 사용자 정의할 수 있습니다.
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
사용자 정의 클래스 이름은 우선 순위가 더 높습니다. Vue의 전환 시스템 및 Animate.css와 같은 기타 타사 CSS 애니메이션 라이브러리에 유용한 공통 클래스 이름보다
명시적 전환 기간(2.2.0의 새로운 기능)
일반적으로 Vue는 전환 효과의 완료 시점을 자동으로 파악할 수 있습니다. 기본적으로 Vue는 전환의 루트 요소에서 첫 번째 transitionend 또는 animationend 이벤트를 기다립니다.
타이밍을 사용자 지정하려면 구성 요소의 duration 속성을 사용하여 명시적 전환 기간(밀리초)을 사용자 지정할 수 있습니다.
<transition :duration="1000">...</transition>입장 및 퇴장 기간을 사용자 정의할 수 있습니다.
<transition :duration="{ enter: 500, leave: 800 }">...</transition>Vue 패키지의 전환 및 애니메이션
기능: DOM 요소를 삽입, 업데이트 또는 제거할 때 적절한 시간에 요소에 스타일 클래스 이름을 추가합니다. 그래픽:
글쓰기:
스타일링 준비:
요소에는 다음과 같은 스타일이 있습니다.
v-enter: 진입 시작점
v-enter-active : 입장하는 과정에서
v-enter-to: 진입의 끝점
떠나는 요소 스타일:
v-leave : 떠나는 시작점
v-leave-active : 퇴사하는 중
v-leave-to: 떠나는 끝점
<transition>을 사용하여 전환할 요소를 래핑하고 name 특성을 구성합니다.
<transition name="hello">
<h1 v-show="isShow">你好啊！</h1>
</transition>비고: 전환해야 하는 요소가 여러 개인 경우 <transition-group>을 사용해야 하며 각 요소는 키 값을 지정해야 합니다.