快捷導(dǎo)航

Vue運(yùn)用transition實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)

更新時(shí)間：2019年05月06日 16:15:20 作者：木子沐沐

vue的過(guò)渡動(dòng)畫(huà)，主要是transition標(biāo)簽的使用，配合css動(dòng)畫(huà)實(shí)現(xiàn)的。接下來(lái)通過(guò)本文給大家分享Vue運(yùn)用transition實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果，感興趣的朋友一起看看吧

vue的過(guò)渡動(dòng)畫(huà)，主要是transition標(biāo)簽的使用，配合css動(dòng)畫(huà)實(shí)現(xiàn)的。官方文檔css過(guò)渡

通過(guò)點(diǎn)擊事件來(lái)切換show的值來(lái)改變顯示的文本，下面的css通過(guò)進(jìn)入離開(kāi)時(shí)的在勻速狀態(tài)下xxs（秒）下來(lái)轉(zhuǎn)換在x軸上位移的距離， transition包括的是位移的內(nèi)。key是必須有的，用來(lái)標(biāo)記位移的哪一個(gè)，這個(gè)方法有一點(diǎn)，用v-if時(shí)會(huì)頻繁的建立銷(xiāo)毀。name是你定義的名字必須有，和css里面的名字是保持一致的，你可以自定義名字。

使用它時(shí)有時(shí)候切換的并不是標(biāo)簽，而是一個(gè)組件，這時(shí)候應(yīng)該使用transition-group來(lái)包括。

<template>
 <div>
 　　<div>
  　　<span @click="show = 0">第一個(gè)</span>
   <span @click="show = 2">第二個(gè)</span>
   <span @click="show = 3">第三個(gè)</span>
  </div>
  <transition-group name="slide">
  　　<div v-show="show == 0" key="0">第一個(gè)文本</div>
   <div v-show="show == 2" key="2">第二個(gè)文本</div>
   <div v-show="show == 3" key="3">第三個(gè)文本</div>
  </transition-group>
 </div>
</template>
<script>
 export default {
  data () {
  　　return {
   show:0
   }
  }
 }
</script>
<style>
 .slide-enter-active{
 　　　　transition:all .5s linear;
 }
 .slide-leave-active{
  transition:all .1s linear;
 }
 .slide-enter{
  transform: translateX(-100%);
  opacity: 0;
 }
 .slide-leave-to{
  transform: translateX(110%);
  opacity: 0;
 }
</style>

總結(jié)

以上所述是小編給大家介紹的Vue運(yùn)用transition實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà) ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

Element?UI安裝全過(guò)程
element?ui?就是基于vue的一個(gè)ui框架,該框架基于vue開(kāi)發(fā)了很多相關(guān)組件,方便我們快速開(kāi)發(fā)頁(yè)面,餓了么前端團(tuán)隊(duì)基于vue進(jìn)行開(kāi)發(fā)并且進(jìn)行了開(kāi)源?element?ui?中提供全部都是封裝好組件,本文給大家介紹Element?UI安裝全過(guò)程,感興趣的朋友一起看看吧
2024-01-01
使用Vue2實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)功能(可直接使用)
這篇文章主要給大家介紹了如何使用Vue2實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)功能,文中有相關(guān)的代碼示例,對(duì)我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-08-08
一文搞懂Vue八大生命周期鉤子函數(shù)
這篇文章主要介紹了Vue八大生命周期鉤子函數(shù),生命周期函數(shù)，就是在某個(gè)時(shí)刻會(huì)自動(dòng)執(zhí)行的函數(shù),本文帶你了解八大生命周期鉤子函數(shù),一起來(lái)看看吧
2023-03-03
Cookbook組件形式：優(yōu)化 Vue 組件的運(yùn)行時(shí)性能
本文仿照Vue Cookbook 組織形式，對(duì)優(yōu)化 Vue 組件的運(yùn)行時(shí)性能進(jìn)行闡述。通過(guò)基本的示例代碼給大家講解，需要的朋友參考下
2018-11-11
vue使用百度地圖報(bào)錯(cuò)BMap?is?not?defined問(wèn)題及解決
這篇文章主要介紹了vue使用百度地圖報(bào)錯(cuò)BMap?is?not?defined問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子)
這篇文章主要介紹了詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
Vue defineProperty使用教程
Vue通過(guò)Object.defineProperty來(lái)實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)據(jù)的改變和讀?。▽傩灾械膅etter和setter方法）實(shí)現(xiàn)數(shù)據(jù)劫持。下面簡(jiǎn)單記錄一下，vue監(jiān)聽(tīng)數(shù)據(jù)變化的原理
2023-01-01
Vue的diff算法原理你真的了解嗎
這篇文章主要為大家詳細(xì)介紹了Vue的diff算法原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
vue修改打包配置如何實(shí)現(xiàn)代碼打包后的自定義命名
這篇文章主要介紹了vue修改打包配置如何實(shí)現(xiàn)代碼打包后的自定義命名，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue的簡(jiǎn)介及@vue/cli?腳手架的使用示例
vue 是一個(gè) 漸進(jìn)式的javascript框架，腳手架是一個(gè)通用概念，幫助搭建項(xiàng)目的工具，本文以vue2為例結(jié)合實(shí)例代碼給大家詳細(xì)講解，感興趣的朋友跟隨小編一起看看吧
2022-12-12