이전 글 "CSS3를 사용하여 간단한 페이지 레이아웃을 만드는 방법을 단계별로 가르쳐드립니다(자세한 코드 설명)"에서는 CSS3를 사용하여 간단한 페이지 레이아웃을 만드는 방법을 소개했습니다. 다음 글은 Vue를 사용하여 애니메이션 효과를 얻는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
공식 API 주소: https://cn.vuejs.org/v2/guide/transitions.html
공식 데모
클릭하면 표시되고 사라집니다demo
点击显示与消失
<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> <script> new Vue({ el: "#demo", data: { show: true, }, }); </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-active { opacity: 0; } </style>
transition
使用<transition name="fade"> (元素,属性、路由....) </transition>
<strong>class</strong>
定义
.fade-enter{ }
进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;(运动的初始状态)
.fade-enter-active{ }
进入过渡的结束状态,元素被插入时就生效,在transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
.fade-leave{ }
离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;
.fade-leave-active{ }
离开过渡的结束状态,元素被删除时生效,在transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
默认的 .fade-enter
变成 .fade-in-enter
默认的 .fade-enter-active
变成 .fade-in-active
默认的 .fade-leave
变成 .fade-out-enter
默认的 .fade-leave-active
变成 .fade-out-active
<transition name="fade" enter-class="fade-in-enter" enter-active-class="fade-in-active" leave-class="fade-out-enter" leave-active-class="fade-out-active" > <p v-show="show">hello</p> </transition>
.fade-in-active, .fade-out-active { transition: all 0.5s ease; } .fade-in-enter, .fade-out-active { opacity: 0; }
transition
相关函数<transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" > <div v-show="show"></div> </transition> <script> export default { methods: { beforeEnter(el) { console.log("动画enter之前"); }, enter(el) { console.log("动画enter进入"); }, afterEnter(el) { console.log("动画进入之后"); el.style.background = "blue"; }, beforeLeave(el) { console.log("动画leave之前"); }, leave(el) { console.log("动画leave"); }, afterLeave(el) { console.log("动画leave之后"); el.style.background = "red"; }, }, }; </script>
transition
结合animate.css
使用以下代码演示元素以 X 轴为基线,翻转进场出场的动画
Animate.css
<!-- 翻转进场出场--> <transition enter-active-class="flipInX" leave-active-class="flipOutX"> <div v-show="show" class="animated"></div> </transition> <!-- 或者 --> <transition enter-active-class="animated flipInX" leave-active-class="animated flipOutX" > <div v-show="show"></div> </transition>transition
<transition-group enter-active-class="flipInX" leave-active-class="flipOutX"> <div v-show="show" :key="x" v-for="x in 5"></div> </transition-group>
<strong>class</strong>
정의
.fade-enter{ }
를 사용하여 입력하세요. 전환 요소가 삽입될 때 적용되는 시작 상태는 하나의 프레임만 적용한 후 즉시 삭제됩니다. (모션의 초기 상태).fade-leave{ }
요소가 삭제될 때 트리거되고 하나의 프레임만 적용한 후 즉시 삭제되는 전환의 시작 상태를 종료합니다.
.fade-leave- active{ }
code>전환의 종료 상태를 종료하고 요소가 삭제될 때 적용되며 전환/애니메이션
이 완료된 후에 제거됩니다. 이 클래스는 전환 프로세스 시간, 지연 및 곡선 기능을 정의하는 데 사용할 수 있습니다. 사용자 정의된 전환 클래스 이름
.fade-enter
는 .fade-in-enter🎜
.fade-enter-active
는 .fade-in-active
🎜 .fade-leave
는 .fade-out-enter
🎜 .fade-leave-active
가 됩니다. >는 .fade-out-active
🎜transition
관련 함수🎜rrreee🎜transition
사용 🎜🎜 🎜 animate.css
와 함께 다음 코드는 X축을 기준으로 사용하여 요소를 뒤집는 애니메이션을 보여줍니다. Animate.css
라이브러리 주소: https: //animate.style/🎜🎜rrreee🎜목록 전환🎜rrreee🎜🎜그룹화 시 키 값이 애니메이션 전환에 직접적인 영향을 미치므로 주의해야 합니다. 자세한 내용은 🎜vue를 참조하세요. 애니메이션 키 값은 전환 애니메이션의 성능에 영향을 미칩니다🎜🎜 🎜🎜추천 학습: 🎜JavaScript 비디오 튜토리얼🎜🎜위 내용은 Vue를 사용하여 애니메이션 효과를 얻는 방법(코드 포함) 교육의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!