vue transition實現頁面切換效果

我們都知道vue可以做成單頁應用 點擊的時候就能切換  如果我們要添加一些視覺效果 比如頁面切換的時候有一個緩沖效果 這個時候就需要用到vue里的transition這個標簽

在使用這個標簽之前需要了解下他的6個類

第一步在app.vue里使用transition標簽

這個是默認值

 

 

第二步在app.vue里監聽用戶是跳轉還是后退  

已下這段代碼放在main.js中

 

第三步編寫動畫效果 這里設置的切換時長是1.5秒 想改多少直接改就行

 

.slide-left-enter, .slide-right-leave-to {
  opacity: 0;
  transform: translateX(100%)
}

.slide-left-leave-to, .slide-right-enter {
  opacity: 0;
  transform: translateX(-100%)
}

.slide-left-enter-active, .slide-left-leave-active, .slide-right-enter-active, .slide-right-leave-active {
  transition: 1.5s;
  position: absolute;
  top:0;
}

 第四步配置路由文件 跳轉

這里使用的是路由懶加載 這有個好處就是第一次進來的時候也會有個默認過渡效果 

 

這里來個傳送門 github  自行下載 記得npm i下載依賴包哦！

然后npm run dev 跑一遍 沒啥問題~ 記錄下 以后用的到