因做小活动比较多,使用了一些动画,做些笔记,供大家参考
翻页动画
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