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