vue transition實現頁面切換效果

時間 2019-12-06

標籤 vue transition 實現頁面切換效果简体版

原文原文鏈接

咱們都知道vue能夠作成單頁應用點擊的時候就能切換若是咱們要添加一些視覺效果好比頁面切換的時候有一個緩衝效果這個時候就須要用到vue裏的transition這個標籤vue

在使用這個標籤以前須要瞭解下他的6個類git

第一步在app.vue裏使用transition標籤github

這個是默認值npm

第二步在app.vue裏監聽用戶是跳轉仍是後退 app

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

第三步編寫動畫效果這裏設置的切換時長是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;
}