欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js實(shí)現(xiàn)微信過(guò)渡動(dòng)畫左右切換效果

 更新時(shí)間:2017年06月13日 09:03:51   作者:Yunfly  
這篇文章主要給大家介紹了利用Vue.js仿微信過(guò)渡動(dòng)畫左右切換效果的相關(guān)資料,需要用到的技術(shù)棧是Vue+Vuex。文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。

前言

awesomes上尋找移動(dòng)端框架的時(shí)候意外發(fā)現(xiàn)了vux的頁(yè)面切換效果,后面由于其他考慮沒(méi)有選用vuex但是這個(gè)切換效果確實(shí)感覺(jué)很有新意,也就看了下源碼,這里貼一份備用。

需要用到的技術(shù)棧:Vue+Vuex

先看看效果圖


過(guò)渡動(dòng)畫

示例代碼

//app.vue
<transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
 <keep-alive>
 <router-view class="router-view" ></router-view>
 </keep-alive>
</transition>
<script>
 import { mapState } from 'vuex'
 import sideFooter from "./components/Footer.vue"

 export default {
 name: 'app',
 data () {
 return {
 showFooter : false
 }
 },
 components : {
 sideFooter
 },
 computed:{
 ...mapState({
 direction: state => state.mutations.direction
 })
 },
 }
</script>

<style scoped>
 .vux-pop-out-enter-active,
 .vux-pop-out-leave-active,
 .vux-pop-in-enter-active,
 .vux-pop-in-leave-active {
 will-change: transform;
 transition: all 250ms;
 height: 100%;
 top: 0;
 position: absolute;
 backface-visibility: hidden;
 perspective: 1000;
 }

 .vux-pop-out-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
 }

 .vux-pop-out-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
 }

 .vux-pop-in-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
 }

 .vux-pop-in-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
 }
</style>
// main.js
const history = window.sessionStorage;
history.clear()
let historyCount = history.getItem('count') * 1 || 0;
history.setItem('/', 0);

router.beforeEach(function (to, from, next) {

 const toIndex = history.getItem(to.path);
 const fromIndex = history.getItem(from.path);

 if (toIndex) {
 if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
 store.commit('UPDATE_DIRECTION', {direction: 'forward'})
 } else {
 store.commit('UPDATE_DIRECTION', {direction: 'reverse'})
 }
 } else {
 ++historyCount;
 history.setItem('count', historyCount);
 to.path !== '/' && history.setItem(to.path, historyCount);
 store.commit('UPDATE_DIRECTION', {direction: 'forward'})
 }
 next()
});

這里還用到了vuex,但是我stroe寫了很多就不提出來(lái)了,主要就是通過(guò) UPDATE_DIRECTION方法更新每一次的路由方向是前進(jìn)還是后退。

man.js里面主要思想就是給路由增加一個(gè)索引存到sessionStorage里面,以點(diǎn)擊過(guò)的索引值不變,新增加的路由,索引增加1,同時(shí)count+1,這樣在頁(yè)面切換時(shí)通過(guò)比較索引值的大小,大的向右小的向左,做到左右有規(guī)律的過(guò)渡。

好了至此一個(gè)左右切換的過(guò)渡效果就成了,最近由于一直在開(kāi)發(fā)也沒(méi)怎么更新文章,如果有朋友有好的想法歡迎與我交流。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

  • 詳解vue頁(yè)面狀態(tài)持久化詳解

    詳解vue頁(yè)面狀態(tài)持久化詳解

    這篇文章主要為大家介紹了vue頁(yè)面狀態(tài)持久化,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-12-12
  • Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性的使用和區(qū)別解析

    Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性的使用和區(qū)別解析

    這篇文章主要介紹了Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性的使用和區(qū)別,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-01-01
  • 詳解vue中l(wèi)ocalStorage的使用方法

    詳解vue中l(wèi)ocalStorage的使用方法

    這篇文章主要介紹了詳解vue中l(wèi)ocalStorage的使用方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • vue-router history模式服務(wù)器端配置過(guò)程記錄

    vue-router history模式服務(wù)器端配置過(guò)程記錄

    vue路由有hash和history兩種模式,這篇文章主要給大家介紹了關(guān)于vue-router history模式服務(wù)器端配置的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • vue如何實(shí)現(xiàn)pc和移動(dòng)端布局詳細(xì)代碼

    vue如何實(shí)現(xiàn)pc和移動(dòng)端布局詳細(xì)代碼

    這篇文章主要給大家介紹了關(guān)于vue如何實(shí)現(xiàn)pc和移動(dòng)端布局的相關(guān)資料, Vue響應(yīng)式布局適配是一種根據(jù)設(shè)備特性自動(dòng)調(diào)整布局的方法,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-10-10
  • vue3使用vue-count-to組件的實(shí)現(xiàn)

    vue3使用vue-count-to組件的實(shí)現(xiàn)

    這篇文章主要介紹了vue3使用vue-count-to組件的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載

    vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載

    學(xué)了vue寫項(xiàng)目這么久,忽然發(fā)現(xiàn)路由懶加載的寫法,節(jié)省了加載所有路由的時(shí)間。本文主要介紹了vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載,感興趣的可以了解一下
    2021-06-06
  • vue2中基于vue-simple-upload實(shí)現(xiàn)文件分片上傳組件功能

    vue2中基于vue-simple-upload實(shí)現(xiàn)文件分片上傳組件功能

    這篇文章主要介紹了vue2中基于vue-simple-upload的文件分片上傳組件,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-06-06
  • 打通前后端構(gòu)建一個(gè)Vue+Express的開(kāi)發(fā)環(huán)境

    打通前后端構(gòu)建一個(gè)Vue+Express的開(kāi)發(fā)環(huán)境

    這篇文章主要介紹了打通前后端構(gòu)建一個(gè)Vue+Express的開(kāi)發(fā)環(huán)境,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-07
  • vue3.0+element表格獲取每行數(shù)據(jù)代碼示例

    vue3.0+element表格獲取每行數(shù)據(jù)代碼示例

    這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過(guò)為表格的行綁定單擊事件來(lái)獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下
    2023-09-09

最新評(píng)論