Vue 左右翻頁，點贊動畫

因做小活動比較多，使用了一些動畫，做些筆記，供大家參考

翻頁動畫

router -> index.js

import Vue from 'vue';
import Router from 'vue-router';
import index from '@/pages/index';
import feedback from '@/pages/feedback';
import version from '@/pages/version';

Vue.use(Router);

export default new Router({
    routes: [{
        path: '/',
        name: 'index',
        meta: {index: 0},
        component: index
    }, {
        path: '/feedback',
        name: 'feedback',
        meta: {index: 1},
        component: feedback
    }, {
        path: '/version',
        name: 'version',
        meta: {index: 1},
        component: version
    }]
});

App.vue

<template>
    <div id="app">
        <transition :name="transitionName">
            <router-view/>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            transitionName: ''
        };
    },
    watch: { // 使用watch 監聽$router的變化
        $route(to, from) {
            // 如果to索引大於from索引,判斷為前進狀態,反之則為后退狀態
            if (to.meta.index > from.meta.index) {
                // 設置動畫名稱
                this.transitionName = 'slide-left';
            } else {
                this.transitionName = 'slide-right';
            }
        }
    }
};
</script>

<style lang="stylus">
@import url('./assets/css/reset');
#app
  height 100%
  min-height 29rem
  background #f3f4f6

.slide-right-enter-active,
.slide-left-enter-active{
  will-change: transform;
  transition: all 500ms;
}
.slide-left-leave-active,
.slide-right-leave-active{
    will-change: transform;
    transition: all 1ms;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>

點贊動畫（效果為逐漸向上飄並且變大）

<transition name="likeAddAnimate">
   <div class="like_add" v-show="addShow">+1</div>
</transition>

// 樣式

 
          
            .likeAddAnimate-enter-active, .likeAddAnimate-leave-active{ 
           
          
            transition all 1.5s ease 
           
          
            } 
           
          
            .likeAddAnimate-enter,.likeAddAnimate-leave{ 
           
          
            transform: translate(0) scale(0); 
           
          
            opacity 1 
           
          
            } 
           
          
            .likeAddAnimate-enter-to, .likeAddAnimate-leave-to{ 
           
          
 
          
            transform: translate(0,-100px) scale(1.5); 
           
          
            opacity 0 
           
          
            } 
           
         

 

翻頁動畫參考文檔 https://blog.csdn.net/qq_33236453/article/details/79110485