成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue Transition 實(shí)現(xiàn)類原生組件跳轉(zhuǎn)過渡動(dòng)畫

whatsns / 3296人閱讀

摘要：官方文檔演示地址請(qǐng)?jiān)谝苿?dòng)端查看，端查看請(qǐng)打開移動(dòng)端調(diào)試模式前言看了挺多的框架都不帶過渡動(dòng)畫，今天心血來(lái)潮，就把自己平時(shí)用的動(dòng)效抽離出來(lái)。原理模版中使用了提供的封裝組件，配合類名在的六種不同的狀態(tài)過渡中切換。

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

演示地址：http://www.coderlife.com (請(qǐng)?jiān)谝苿?dòng)端查看，PC端查看請(qǐng)打開移動(dòng)端調(diào)試模式)

前言

看了挺多Vue的UI框架都不帶過渡動(dòng)畫，今天心血來(lái)潮，就把自己平時(shí)用的動(dòng)效抽離出來(lái)?？芍苯油ㄟ^腳手架init模版配合其他UI框架使用，不需要另外進(jìn)行配置。

原理

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

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

重寫跳轉(zhuǎn)函數(shù) 
// 根據(jù)具體的跳轉(zhuǎn)類型更改跳轉(zhuǎn)屬性值，執(zhí)行不同的動(dòng)畫
const nextDirection = (direction) => {
  let el = document.getElementById("app")
  if (el) el.setAttribute("transition-direction", direction)
}

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

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

// 重寫路由返回方法，設(shè)置跳轉(zhuǎn)類型后跳轉(zhuǎn)到上一頁(yè)
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

倉(cāng)庫(kù)地址：https://github.com/CoderLQCho... 歡迎star

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87359.html

相關(guān)文章

  • 指尖前端重構(gòu)（React）技術(shù)調(diào)研分析

    摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來(lái)看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計(jì)使用的站點(diǎn)是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。 一、為什么選擇React React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒有React創(chuàng)新的性能優(yōu)化...

    AlphaWallet 評(píng)論0 收藏0

  • Vue.js進(jìn)入/離開&列表過度動(dòng)畫。

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

    thekingisalwaysluc 評(píng)論0 收藏0

  • vue.js起步式（二）

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

    BearyChat 評(píng)論0 收藏0

  • VUE2.0學(xué)習(xí)筆記

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

    pumpkin9 評(píng)論0 收藏0

  • vue內(nèi)置組件——transition簡(jiǎn)單原理圖文詳解

    摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。在整個(gè)進(jìn)入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡動(dòng)畫完成之后移除。這個(gè)類可以被用來(lái)定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。版及以上定義進(jìn)入過渡的結(jié)束狀態(tài)。 基本概念 Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果 在 CSS 過渡和動(dòng)畫中自動(dòng)應(yīng)用 class 可以配合使用第三方 CSS 動(dòng)畫庫(kù)，如...

    lingdududu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<