因做小活动比较多,使用了一些动画,做些笔记,供大家参考

翻页动画

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: },
component: index
}, {
path: '/feedback',
name: 'feedback',
meta: {index: },
component: feedback
}, {
path: '/version',
name: 'version',
meta: {index: },
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 %
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: ;
transform: translate3d(-%, , );
}
.slide-right-leave-active {
opacity: ;
transform: translate3d(%, , );
}
.slide-left-enter {
opacity: ;
transform: translate3d(%, , );
}
.slide-left-leave-active {
opacity: ;
transform: translate3d(-%, , );
}
</style>

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

<transition name="likeAddAnimate">
<div class="like_add" v-show="addShow">+</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

Vue 左右翻页,点赞动画的更多相关文章

  1. 移动web:翻页场景动画

    在移动web,特别是在微信中,经常看到一种翻页动画效果,也称为场景动画. 一页一页的翻过,像在看书,每页的内容以各种"炫酷"的效果出现在你的眼里,配上一首动听的音乐,你有没有喜欢上 ...

  2. vue商品详情页添加动画(eg)

    <template> <div class="food" transition="move"></div> </tem ...

  3. 6个超炫酷的HTML5电子书翻页动画

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...

  4. Android 实现书籍翻页效果----完结篇

    By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添 ...

  5. Android 实现书籍翻页效果----升级篇

    自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...

  6. 翻页组件page-flip调用问题

    翻页组件重新调用解决方案 翻页组件:page-flip import { PageFlip } from 'page-flip' pagefile() { //绘制翻页 this.pageFlip = ...

  7. 动画:UIKitAnimation 简单动画学习 iOS (一) 渐变 、 移动 、翻页、来回翻转 ——转载

    转载请说明(谢谢) http://blog.csdn.net/a21064346/article/details/7851695 点击打开链接 以下 一个系列的 动画效果 在 UIView.h文件中可 ...

  8. css3 --- 翻页动画 --- javascript --- 3d --- Action

    用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...

  9. css3 --- 翻页动画 --- javascript --- 3d --- 准备

    用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...

随机推荐

  1. [CF846D]Monitor题解

    看了一眼这题所用的操作,我觉得二维树状数组珂做,然后发现如果按时间顺序把节点一个个加进去再判会TLE,但发现二分时间明显比刚刚的做法快,于是二分时间+暴力插入该时间之内的点+树状数组维护即可AC 贴个 ...

  2. <i>和<em>、<b>和<strong>标签的区别

    在HTML4.01中:< b > < i > 是视觉要素(presentationl elements),分别表示无意义的加粗,无意义的斜体,仅仅表示样式上是粗体或斜体,而没有 ...

  3. js常见的几种设计模式

    一.单例模式 单例模式也称作为单子模式,更多的也叫做单体模式.为软件设计中较为简单但是最为常用的一种设计模式. 在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的 ...

  4. 170819-关于JSTL的知识点

    1.JSTL(JSP Standard Tag Library) [1] JSTL简介 > JSTL是JSP的标准标签库 > JSTL为我们提供了一些常用的标签,供我们日常开发使用(if ...

  5. 2018 CCPC 吉林站 H Lovers || HDU 6562 (线段树哦)

    http://acm.hdu.edu.cn/showproblem.php?pid=6562 题意: q次操作 1.将第l~r个数的左边和和右边都加上一个数d, 使得这个数变成 dsiddsid的形式 ...

  6. Day1 方法的重载

    方法的重载 方法的标识符包括: 1.方法名称   2.方法的参数(参数类型和参数的数量) 方法的重载:方法名称相同 但是方法参数不同(1.参数类型不同 2.参数类型相同 但是参数个数不同 3.类型和个 ...

  7. legend3---1、meedu安装

    legend3---1.meedu安装 一.总结 一句话总结: 视频的安装教程做主菜,辅以文档安装教程做配料,口感甚佳. 1.为什么不直接从github下载文件的发行版,而要选择composer方式安 ...

  8. 2017工业软件top100

  9. 解决Docker容器 iptables问题---docker: Error response from daemon: driver failed programming external connectivity on endpoint quizzical_thompson

    一.问题现象 最近在研究Docker容器日志管理时,启动容器出现iptables相关报错,具体问题如下 运行容器 [root@node-11 ~]# docker run -d -p 24224:24 ...

  10. Mac下用命令行压缩和解压rar文件的方法

    废话不多说,直接进入主题 第一步:下载RAR工具包,根据自己需要下载相对应的版本 第二步:解压对应的压在的压缩包rarosx-5.4.0.tar.gz(我下载的是5.4.0版本) 第三步:从终端进入到 ...