画面切换后的初始动画

本身vue的transiton加apear是可以直接在路由切换后显示开场动画的 但我的导航栏本身添加过滚动或者悬浮的动画加过transation了 直接在路由切换后改v-if的话 会显示原来的导航栏 所以 要换个方法 想到一个 就是在两者之间再加一个空白状态的导航栏 先进入新页面前进入空白状态 再在mounted中使用vue.$nextTick进入显示的状态 这样就能出现出场动画的效果

<transition mode="out-in" name="slide-fade"
      <div id="nav1" v-if="isShow === 'blank'"></div>
      <div v-if="isShow === 'onlyName'" id="nav1" @mouseenter="over" key="nav1">
        <div class="left"><span>爱敲代码の</span>秃头鱼</div>
      </div>
      <div v-if="isShow === 'trueNav'" id="nav2" @mouseleave="out" key="nav2">
        <div class="left"><span>爱敲代码の</span>秃头鱼</div>
        <div class="right">
          <div class="right-content">
            <div class="right-item" @click="toHome">
              <span class="icon iconfont iconexit">&#xe63a; </span>首页
            </div>
            <div class="right-item" @click="toTimeLine">
              <span class="icon iconfont iconexit">&#xe63e; </span>归档
            </div>
            <div class="right-item">
              <span class="icon iconfont iconexit">&#xe64c; </span>清单
              <div class="drowList">
                <div @click="toAnime">
                  <span class="icon iconfont iconexit"> &#xe642; </span>番剧
                </div>
                <div @click="toMusic">
                  <span class="icon iconfont iconexit"> &#xe641; </span>音乐
                </div>
                <div @click="toGame">
                  <span class="icon iconfont iconexit"> &#xe646; </span>游戏
                </div>
                <!-- <div @click="toBook">
                  <span class="icon iconfont iconexit"> &#xe650; </span>书籍
                </div> -->
              </div>
            </div>
            <div class="right-item" @click="toMessage">
              <span class="icon iconfont iconexit">&#xe646; </span>留言板
            </div>
            <div class="right-item" @click="toAbout">
              <span class="icon iconfont iconexit">&#xe651; </span>关于
            </div>
          </div>
        </div>
      </div>
    </transition>