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





点赞动画(效果为逐渐向上飘并且变大)

"likeAddAnimate">
   
class="like_add" v-show="addShow">+1


// 样式
.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 

转载于:https://www.cnblogs.com/1032473245jing/p/10553142.html

你可能感兴趣的:(Vue 左右翻页,点赞动画)