Vue運用transition實現(xiàn)過渡動畫
更新時間：2019年05月06日 16:15:20 作者：木子沐沐
vue的過渡動畫，主要是transition標(biāo)簽的使用，配合css動畫實現(xiàn)的。接下來通過本文給大家分享Vue運用transition實現(xiàn)過渡動畫效果，感興趣的朋友一起看看吧
vue的過渡動畫，主要是transition標(biāo)簽的使用，配合css動畫實現(xiàn)的。官方文檔css過渡
通過點擊事件來切換show的值來改變顯示的文本，下面的css通過進(jìn)入離開時的在勻速狀態(tài)下xxs（秒）下來轉(zhuǎn)換在x軸上位移的距離， transition包括的是位移的內(nèi)。key是必須有的，用來標(biāo)記位移的哪一個，這個方法有一點，用v-if時會頻繁的建立銷毀。name是你定義的名字必須有，和css里面的名字是保持一致的，你可以自定義名字。
使用它時有時候切換的并不是標(biāo)簽，而是一個組件，這時候應(yīng)該使用transition-group來包括。
<template>
<div>
<div>
<span @click="show = 0">第一個</span>
<span @click="show = 2">第二個</span>
<span @click="show = 3">第三個</span>
</div>
<transition-group name="slide">
<div v-show="show == 0" key="0">第一個文本</div>
<div v-show="show == 2" key="2">第二個文本</div>
<div v-show="show == 3" key="3">第三個文本</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運用transition實現(xiàn)過渡動畫 ，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
element?ui?就是基于vue的一個ui框架,該框架基于vue開發(fā)了很多相關(guān)組件,方便我們快速開發(fā)頁面,餓了么前端團(tuán)隊基于vue進(jìn)行開發(fā)并且進(jìn)行了開源?element?ui?中提供全部都是封裝好組件,本文給大家介紹Element?UI安裝全過程,感興趣的朋友一起看看吧2024-01-01
這篇文章主要給大家介紹了如何使用Vue2實現(xiàn)簡單的購物車功能,文中有相關(guān)的代碼示例,對我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue八大生命周期鉤子函數(shù),生命周期函數(shù)，就是在某個時刻會自動執(zhí)行的函數(shù),本文帶你了解八大生命周期鉤子函數(shù),一起來看看吧2023-03-03
Cookbook組件形式：優(yōu)化 Vue 組件的運行時性能
本文仿照Vue Cookbook 組織形式，對優(yōu)化 Vue 組件的運行時性能進(jìn)行闡述。通過基本的示例代碼給大家講解，需要的朋友參考下2018-11-11
vue使用百度地圖報錯BMap?is?not?defined問題及解決
這篇文章主要介紹了vue使用百度地圖報錯BMap?is?not?defined問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子)
這篇文章主要介紹了詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue通過Object.defineProperty來實現(xiàn)監(jiān)聽數(shù)據(jù)的改變和讀?。▽傩灾械膅etter和setter方法） 實現(xiàn)數(shù)據(jù)劫持。下面簡單記錄一下，vue監(jiān)聽數(shù)據(jù)變化的原理2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue的diff算法原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue修改打包配置如何實現(xiàn)代碼打包后的自定義命名
這篇文章主要介紹了vue修改打包配置如何實現(xiàn)代碼打包后的自定義命名，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue 是一個 漸進(jìn)式的javascript框架，腳手架是一個通用概念，幫助搭建項目的工具，本文以vue2為例結(jié)合實例代碼給大家詳細(xì)講解，感興趣的朋友跟隨小編一起看看吧2022-12-12