Vue Transition 實現類原生組件跳轉過渡動畫

whatsns 發布于2019-08-21 12:01 / 3253人閱讀

摘要：官方文檔演示地址請在移動端查看，端查看請打開移動端調試模式前言看了挺多的框架都不帶過渡動畫，今天心血來潮，就把自己平時用的動效抽離出來。原理模版中使用了提供的封裝組件，配合類名在的六種不同的狀態過渡中切換。

官方文檔：https://cn.vuejs.org/v2/guide...

演示地址：http://www.coderlife.com (請在移動端查看，PC端查看請打開移動端調試模式)

前言

看了挺多Vue的UI框架都不帶過渡動畫，今天心血來潮，就把自己平時用的動效抽離出來。可直接通過腳手架init模版配合其他UI框架使用，不需要另外進行配置。

原理

模版中使用了Vue提供的封裝組件 transition，配合CSS類名在 enter/leave 的六種不同的狀態過渡中切換。

對于這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴。使用可以重置前綴，比如 v-enter 替換為 my-transition-enter。

重寫跳轉函數

// 根據具體的跳轉類型更改跳轉屬性值，執行不同的動畫
const nextDirection = (direction) => {
  let el = document.getElementById("app")
  if (el) el.setAttribute("transition-direction", direction)
}

router["_push"] = router["push"]

// 重寫路由跳轉方法，設置跳轉類型后跳轉
router.forward = router["push"] = (target) => {
  nextDirection("forward")
  setTimeout(() => { router["_push"](target) })
}

// 重寫路由返回方法，設置跳轉類型后跳轉到上一頁
router.back = (target) => {
  nextDirection("back")
  if (target) {
    setTimeout(() => { router["_push"](target) })
  }
  history.go(-1)
}

How to use

# init template
vue init CoderLQChou/v-transition-template my-transition-app

# cd project
cd my-transition-app

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

倉庫地址：https://github.com/CoderLQCho... 歡迎star

GPU云服務器云服務器翻轉過渡動畫 ios過渡動畫 jquery過渡動畫 vue組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87359.html

指尖前端重構（React）技術調研分析

摘要：一為什么選擇是當前前端應用最廣泛的框架。目前來看的生態系統要比大的多，在等最大的技術社區搜索兩者，的搜索結果是的十倍左右，另外據近期統計使用的站點是的幾百倍以上。其中是基于技術，依然是瀏覽器應用。一、為什么選擇React React是當前前端應用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現最早，但其在原理上并沒有React創新的性能優化...

AlphaWallet 2019-08-23 18:18 評論0 收藏0
Vue.js進入/離開&列表過度動畫。

摘要：包括以下工具在過渡和動畫中自動應用可以配合第三方動畫庫，如在過渡鉤子函數中使用直接操作可以配合使用第三方動畫庫，如在這里，我們只會講到進入離開和列表的過渡。不僅可以進入和離開動畫，還可以改變定位。概述 Vue在插入、更新或則移除DOM時，提供多種不同方式的應用過渡效果。包括以下工具： *在CSS過渡和動畫中自動應用class *可以配合第三方CSS動畫庫，如Animate.css *...

thekingisalwaysluc 2019-08-23 15:23 評論0 收藏0
vue.js起步式（二）

摘要：當需要和第三方的動畫庫，比如配合時會非常有用顯式聲明過渡類型新增需要給過渡元素添加事件偵聽器來偵聽過渡何時結束。在下例中我們使用注冊一個自定義的過渡元素已被插入在動畫結束后調用與相同然后用特性中漸近過渡與一起用時可以創建漸近過渡。 8.方法與事件處理器方法處理器可以用 v-on 指令監聽 DOM 事件： Greet 我們綁定了一個單擊事件處理器到一個方法 greet。下面在...

BearyChat 2019-08-20 10:29 評論0 收藏0
VUE2.0學習筆記

摘要：添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。差別在哪里將特性名轉換為從開始支持語法糖，會擴展成一個更新父組件綁定值的偵聽器。如果需要條件渲染多個元素，可以使用包裹。 1.前言安裝直接用引入（本地或者cdn） npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 評論0 收藏0
vue內置組件——transition簡單原理圖文詳解

摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。版及以上定義進入過渡的結束狀態。基本概念 Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果在 CSS 過渡和動畫中自動應用 class 可以配合使用第三方 CSS 動畫庫，如...

lingdududu 2019-08-22 18:39 評論0 收藏0