<style>
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
transition: all 3s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
transition: all 3s;
}
</style>
<div id="app">
<button @click="toggle">按钮</button>
<transition>
<div class="box" :style="obj" v-show="isShow"></div>
</transition>
</div>
let vm =new Vue({
el: '#app',
data: {
obj: {
'width': '300px',
'height': '300px',
'background': 'red'
},
isShow: false
},
methods: {
toggle () {
this.isShow = !this.isShow
}
}
});
transition标签注意点
<style>
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
transition: all 3s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
transition: all 3s;
}
</style>
let vm =new Vue({
el: '#app',
data: {
obj1: {
'width': '300px',
'height': '300px',
'background': 'red'
},
obj2: {
'width': '300px',
'height': '300px',
'background': 'blue'
},
isShow: false
},
methods: {
toggle () {
this.isShow = !this.isShow
}
}
});
-
一对transition标签只能包裹一个元素进行动画，如果包裹多个元素，只有第一个元素能进行过度动画
<div id="app"> <button @click="toggle">按钮</button> <transition> <!--该元素可以进行过度动画--> <div class="box" :style="obj1" v-show="isShow"></div> <!--该元素无法进行过度动画--> <div class="box" :style="obj2" v-show="isShow"></div> </transition> </div> -
多个元素需要进行过渡动画，需要使用多个一对transition标签单独进行包裹
<div id="app"> <button @click="toggle">按钮</button> <!--两元素可以进行过度动画--> <transition> <div class="box" :style="obj1" v-show="isShow"></div> </transition> <transition> <div class="box" :style="obj2" v-show="isShow"></div> </transition> </div>
页面显示元素自动执行动画
在需要自动执行动画的元素的transition标签上添加appear属性
-
执行自动动画的元素，必须默认为显示状态
<style> .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 3s; } .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 3s; } </style>let vm =new Vue({ el: '#app', data: { obj1: { 'width': '300px', 'height': '300px', 'background': 'red' }, obj2: { 'width': '300px', 'height': '300px', 'background': 'blue' }, isShow: false }, methods: { toggle () { this.isShow = !this.isShow } } });<div id="app"> <button @click="toggle">按钮</button> <!--页面显示元素自动执行动画--> <transition appear> <div class="box" :style="obj1" v-show="isShow"></div> </transition> <transition> <div class="box" :style="obj2" v-show="isShow"></div> </transition> </div>
不用元素之间实现不同的过度效果
默认情况下，全部的元素都会使用【.v-enter/.v-enter-active/.v-enter-to】和【.v-leave/ .v-leave-active/.v-leave-to】类型设置的过度效果
可以通过给元素对应transition标签，设置name属性更改默认过度类的前缀，实现让不同的元素拥有不同的过度效果
-
如果给transition标签设置name属性达到不同的过度效果，需要重新配置对应的过度样式
<style> /* one 过渡动画 */ .one-enter{ opacity: 0; } .one-enter-to{ opacity: 1; } .one-enter-active{ transition: all 3s; } .one-leave{ opacity: 1; } .one-leave-to{ opacity: 0; } .one-leave-active{ transition: all 3s; } /* two 过渡动画 */ .two-enter{ opacity: 0; } .two-enter-to{ opacity: 1; } .two-enter-active{ transition: all 5s; } .two-leave{ opacity: 1; } .two-leave-to{ opacity: 0; } .two-leave-active{ transition: all 5s; } </style>let vm =new Vue({ el: '#app', data: { obj1: { 'width': '300px', 'height': '300px', 'background': 'red' }, obj2: { 'width': '300px', 'height': '300px', 'background': 'blue' }, isShow: false }, methods: { toggle () { this.isShow = !this.isShow } } });<div id="app"> <button @click="toggle">按钮</button> <transition name="one"> <div class="box" :style="obj1" v-show="isShow"></div> </transition> <transition name="two"> <div class="box" :style="obj2" v-show="isShow"></div> </transition> </div>
Vue提供的动画钩子函数
- Vue提供了动画的钩子函数，使用钩子函数可以实现动画效果之外，还能保持动画执行完毕的状态，只要给元素对应的transition标签添加对应的钩子函数即可
钩子函数
<style>
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
transition: all 3s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
transition: all 3s;
}
</style>
<div id="app">
<button @click="toggle">启动</button>
<!--注意点:
1.虽然通过Vue提供的钩子函数实现过渡动画效果，但是默认情况下Vue还是会先去查找类名中的过渡效果，如果有则使用
2.为了不让Vue去查找类名，可以给transition添加v-bind:css="false"-->
<transition appear
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<div class="box" v-show="isShow" :style="[obj]"></div>
</transition>
</div>
-
初步使用
/* v-on:before-enter="beforeEnter"（进入动画之前调用beforeEnter函数） v-on:enter="enter"（动画过程中调用enter函数） v-on:after-enter="afterEnter"（动画结束后调用afterEnter函数）*/ let vm =new Vue({ el: '#app', data: { obj: { 'width': '300px', 'height': '300px', 'background': 'red' }, isShow: false }, methods: { toggle () { this.isShow = !this.isShow }, // 每个钩子函数都有一个el形参，通过它可以获取需要执行动画的元素 beforeEnter(el) { console.log("调用beforeEnter") el.style.opacity = '0'; }, /* 1.每个钩子函数都有一个el形参，通过它可以获取需要执行动画的元素 2.enter钩子形参中除了el还有done，它是一个函数，通过调用done告诉Vue，动画到这执行完毕*/ enter(el, done) { console.log("调用enter") /* 需要添加任意el.offsetHeight或el.offsetWidth 告诉Vue该元素显示*/ el.offsetHeight el.style.transition = "all 5s"; // 告诉Vue动画执行完毕，afterEnter才能被调用 done() }, // 每个钩子函数都有一个el形参，通过它可以获取需要执行动画的元素 afterEnter(el) { console.log("调用afterEnter") el.style.opacity = '1'; } } }); -
使用钩子函数画面显示，动画自动执行
let vm =new Vue({ el: '#app', data: { obj: { 'width': '300px', 'height': '300px', 'background': 'red' }, // 元素必须默认为显示状态 isShow: true }, methods: { toggle () { this.isShow = !this.isShow }, beforeEnter(el) { console.log("调用beforeEnter") el.style.opacity = '0'; }, enter(el, done) { console.log("调用enter") el.offsetHeight el.style.transition = "all 5s"; // 通过JS事件循环，延迟done()的执行 setTimeout () { done() } }, afterEnter(el) { console.log("调用afterEnter") el.style.opacity = '1'; } } });
Vue配合第三方库，实现动画（有问题）
-
使用钩子函数 + 第三库（Velocity）
<div id="app"> <button @click="toggle">启动</button> <transition appear v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter"> <div class="box" v-show="isShow" :style="[obj]"></div> </transition> </div>// 导入第三方库 <script src="js/velocity.js"></script>let vm =new Vue({ el: '#app', data: { obj: { 'width': '300px', 'height': '300px', 'background': 'red' }, isShow: true }, methods: { toggle () { this.isShow = !this.isShow }, beforeEnter(el) { console.log("调用beforeEnter") }, enter(el, done) { console.log("调用enter") // 在enter钩子函数中使用第三方库的使用方法 // Velocity(el, {opacity: 1, marginLeft: "500px"}, 3000) done() }, afterEnter(el) { console.log("调用afterEnter") } } });
