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: },
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> // 样式
翻页动画参考文档 https://blog.csdn.net/qq_33236453/article/details/79110485
Vue 左右翻页,点赞动画的更多相关文章
- 移动web:翻页场景动画
在移动web,特别是在微信中,经常看到一种翻页动画效果,也称为场景动画. 一页一页的翻过,像在看书,每页的内容以各种"炫酷"的效果出现在你的眼里,配上一首动听的音乐,你有没有喜欢上 ...
- vue商品详情页添加动画(eg)
<template> <div class="food" transition="move"></div> </tem ...
- 6个超炫酷的HTML5电子书翻页动画
相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...
- Android 实现书籍翻页效果----完结篇
By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添 ...
- Android 实现书籍翻页效果----升级篇
自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...
- 翻页组件page-flip调用问题
翻页组件重新调用解决方案 翻页组件:page-flip import { PageFlip } from 'page-flip' pagefile() { //绘制翻页 this.pageFlip = ...
- 动画:UIKitAnimation 简单动画学习 iOS (一) 渐变 、 移动 、翻页、来回翻转 ——转载
转载请说明(谢谢) http://blog.csdn.net/a21064346/article/details/7851695 点击打开链接 以下 一个系列的 动画效果 在 UIView.h文件中可 ...
- css3 --- 翻页动画 --- javascript --- 3d --- Action
用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...
- css3 --- 翻页动画 --- javascript --- 3d --- 准备
用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...
随机推荐
- [CF846D]Monitor题解
看了一眼这题所用的操作,我觉得二维树状数组珂做,然后发现如果按时间顺序把节点一个个加进去再判会TLE,但发现二分时间明显比刚刚的做法快,于是二分时间+暴力插入该时间之内的点+树状数组维护即可AC 贴个 ...
- <i>和<em>、<b>和<strong>标签的区别
在HTML4.01中:< b > < i > 是视觉要素(presentationl elements),分别表示无意义的加粗,无意义的斜体,仅仅表示样式上是粗体或斜体,而没有 ...
- js常见的几种设计模式
一.单例模式 单例模式也称作为单子模式,更多的也叫做单体模式.为软件设计中较为简单但是最为常用的一种设计模式. 在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的 ...
- 170819-关于JSTL的知识点
1.JSTL(JSP Standard Tag Library) [1] JSTL简介 > JSTL是JSP的标准标签库 > JSTL为我们提供了一些常用的标签,供我们日常开发使用(if ...
- 2018 CCPC 吉林站 H Lovers || HDU 6562 (线段树哦)
http://acm.hdu.edu.cn/showproblem.php?pid=6562 题意: q次操作 1.将第l~r个数的左边和和右边都加上一个数d, 使得这个数变成 dsiddsid的形式 ...
- Day1 方法的重载
方法的重载 方法的标识符包括: 1.方法名称 2.方法的参数(参数类型和参数的数量) 方法的重载:方法名称相同 但是方法参数不同(1.参数类型不同 2.参数类型相同 但是参数个数不同 3.类型和个 ...
- legend3---1、meedu安装
legend3---1.meedu安装 一.总结 一句话总结: 视频的安装教程做主菜,辅以文档安装教程做配料,口感甚佳. 1.为什么不直接从github下载文件的发行版,而要选择composer方式安 ...
- 2017工业软件top100
- 解决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 ...
- Mac下用命令行压缩和解压rar文件的方法
废话不多说,直接进入主题 第一步:下载RAR工具包,根据自己需要下载相对应的版本 第二步:解压对应的压在的压缩包rarosx-5.4.0.tar.gz(我下载的是5.4.0版本) 第三步:从终端进入到 ...