Vue第三天
过渡效果
组件
过渡效果
概述
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。
包括以下工具:
- 1.在 CSS 过渡和动画中自动应用 class
- 2.可以配合使用第三方 CSS 动画库,如 Animate.css
- 3.在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 4.可以配合使用第三方 JavaScript 动画库,如 Velocity.js
1.使用过度类名实现动画
- 写个简单例子说明:
<!--自定义两组样式,来控制 transition 内部的元素实现动画-->
<style>
/* v-enter : 【这是一个时间点】 是进入之前,元素的起始状态,此时还没有开始进入
v-leave-to:【这是一个时间点】 是动画离开之后,离开的终止状态,此时, 元素动画已经结束
*/
.v-enter, .v-leave-to {
opacity: 0;
transform: translateX(80px);
}
/*
v-enter-active: 入场动画的时间段
v-leave-active:离场动画的时间段
*/
.v-enter-active, .v-leave-active {
transition: all 2s;
}
</style>
<div id="app">
<button @click="flag=!flag">点击</button>
<!--1. transition 元素,是Vue 官方提供的-->
<transition>
<h3 v-if="flag">这是一个h3</h3>
</transition>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
- 修改v-前缀(自定义前缀)
<style>
.my-enter, .my-leave-to {
opacity: 0;
transform: translateY(-80px);
}
.my-enter-active, .my-leave-active {
transition: all 2s;
}
</style>
<body>
<button @click="flag1=!flag1">点击</button>
<!--1. transition 元素,是Vue 官方提供的-->
<transition name="my">
<h6 v-if="flag1">这是一个h6</h6>
</transition>
</body>
2.使用第三方类实现动画
<link rel="stylesheet" href="../../animate.css">
<div id="app">
<button @click="flag=!flag">点击</button>
<!--使用 transition 元素 包裹起来-->
<transition
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{enter:200,leave:400}">
<h3 v-if="flag">这是一个h3</h3>
</transition>
</div>
- 直接使用在元素身上
<transition >
<h3 class="animated infinite bounce delay-2s">这是一个h3</h3>
</transition>
3.JavaScript钩子
- html:
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
- js
methods: {
// 进入中
beforeEnter: function