尚硅谷-尚品汇项目开发总结（第六天）

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参数