9:过渡与动画(由三级联动分类引出)
9.1 过渡与动画的主要实现
vue中封装的过渡与动画必须与v-show或v-if配合使用,想要进行过渡的内容必须用transtion组件包裹,如果在transtion组件中不使用name指定名字,则全部用v-。样式的指定需要在css中进行。
9.2 过渡dome(不配置name)
<template>
<div>
<button @click='isShow = !isShow'>开始过渡</button>
<transition>
<div class="t1" v-show='isShow'></div>
</transition>
</div>
</template>
<script>
export default {
name:'Trans',
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
.t1{
height: 100px;
width: 300px;
background-color: orange;
}
//过渡开始
.v-enter{
width: 0;
}
.v-enter-to{
width: 300px;
}
.v-enter-active{
transition: all 2s linear;
}
//过渡结束
.v-leave{
width: 300px;
}
.v-leave-to{
width: 0;
}
.v-leave-active{
transition: all 2s linear;
}
</style>
9.3 动画demo(配置name)
<template>
<div>
<button @click='isShow = !isShow'>开始动画</button>
<transition name="test">
<div class="t2" v-show='isShow'></div>
</transition>
</div>
</template>
<script>
export default {
name:'Trans',
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
.t2{
height: 100px;
width: 300px;
background-color: red;
}
@keyframes animate {
0%{
width: 0;
}
100%{
width: 300px;
}
}
.test-enter-active{
animation: animate 2s linear;
}
.test-leave-active{
animation: animate 2s linear reverse;
}
</style>
动态效果如下
10:三级联动的性能优化问题与合并参数
10.1 获取三级联动分类中的数据需要向服务器发送请求,每一次点击菜单都会发送请求获取数据,导致性能较差。
解决方法:不在三级联动分类组件挂载时发送请求,在App根组件挂载时去发送请求获取数据,这样就只会发送一次请求。
mounted() {
// 在根组件派发dispatch获取三级分类列表数据,这样只会请求一次服务器(优化)
this.$store.dispatch("categoryList");
}
10.2 合并参数
原因:三级分类菜单是query参数传递,关键字搜索是params参数传递
如果用户先点击三级分类菜单,则需要判断是否还要带上关键字搜索的params参数;如果用户先点击关键字搜索,则需要判断是否要加上三级分类菜单的query参数