前端尚品汇（五）

过渡动画效果

开发Searchi模块中的TypeNav商品分类菜单（过渡动画效果）
过渡动画：前提组件|元素务必要有v-if|v-show指令才可以进行过渡动画

先回顾一下css中的过渡

我们看看在vue中的过渡

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。
这是语法格式

<transition name = "nameoftransition">
   <div></div>
</transition>

在实际例子中试试

<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name = "fade">
    <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
    data: {
        show:true,
        styleobj :{
            fontSize:'30px',
            color:'red'
        }
    },
    methods : {
    }
});
</script>

接下回到尚品汇的导航栏，一起来看看是如何实现的

首先，先使用模板标签transition ，并定义一个name为sort

<transition name="sort">
          <div class="sort" v-show="show">
            <!-- 一级菜单 -->
            <div class="all-sort-list2" @click="goSearch">
              <div
                class="item bo"
                v-for="(c1, index) in categoryList"
                v-bind:key="c1.categoryId"
                :class="{ cur: currentIndex == index }"
              >
                <h3 @mouseenter="changeIndex(index)">
                   <a
                    :data-categoryName="c1.categoryName"
                    :data-categoryId1="c1.categoryId"
                    >{{ c1.categoryName }}</a>
               <!--   <router-link to="/search" >{{ c1.categoryName}}</router-link>-->
                </h3>
                <!-- 二三级菜单 -->
                <div
                  class="item-list clearfix"
                  :style="{ display: currentIndex == index ? 'block' : 'none' }"
                >
                  <div
                    class="subitem"
                    v-for="c2 in c1.categoryChild"
                    v-bind:key="c2.categoryId"
                  >
                    <dl class="fore">
                      <dt>
                        <a
                          :data-categoryName="c2.categoryName"
                          :data-categoryId2="c2.categoryId"
                          >{{ c2.categoryName }}</a
                        >
                      </dt>
                      <dd>
                        <em
                          v-for="c3 in c2.categoryChild"
                          v-bind:key="c3.categoryId"
                        >
                          <a
                            :data-categoryName="c3.categoryName"
                            :data-categoryId3="c3.categoryId"
                            >{{ c3.categoryName }}</a
                          >
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>

接着来写样式

//过渡动画的样式
    // 过渡动画开始状态（进入）
    .sort-enter {
      height: 0px;
    }
    //过渡动画结束状态（进入）
    .sort-enter-to {
      height: 481px;
    }
    //定义动画时间、速率
    .sort-enter-active {
      transition: all 0.5s linear;
    }

这样就完成了
接着来看要想typev获取列表数据整个运行过程只获取一次数据要怎么写呢
首先运行项目，发现在home页和search页列表数据都有获取
如果想要在运行整个项目时只获取一次得咋办嘞
在typev组件找到挂载从仓库获取数据的代码

 //在mounted中
 this.$store.dispatch("categoryList");

将它剪切，移到App.vue就可以了
为啥不移到main.js中呢，它可是入口欸
这是因为，main.js虽然是入口，但他不是实例，在控制台打印this是未定义的
而App.vue,它**是入口之后的第二个文件，是个组件，**就可以实现挂载了