Nuxt的路由动画效果
Nuxt.js提供两种方法为路由提供动画效果,一种是全局的,一种是针对单独页面的
全局动画默认使用page来进行设置,例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个main.css文件。
/assets/css/main.css(没有请自行建立)
.page-enter-active, .page-leave-active {
transition: opacity 2s;
}
.page-enter, .page-leave-active {
opacity: ;
}
然后在nuxt.config.js里加入一个全局的css文件就可以了。
css:['assets/css/main.css'],
页面单独设置特殊的效果时,我们只要在css里改变默认的page,然后在页面组件的配置中加入transition字段即可。例如,我们想给commodity页面加入一个字体放大然后缩小的效果,其他页面没有这个效果。
在全局样式assets/main.css 中添加以下内容。
.commodity-enter-active, .commodity-leave-active {
transition: all 2s;
font-size:12px; }
.commodity-enter, .commodity-leave-active {
opacity: ;
font-size:40px;
}
然后在commodity/index.vue组件中设置
export default {
transition:'test'
}
Nuxt的路由动画效果的更多相关文章
- vue2借助animate.css实现路由动画效果
第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...
- Flutter酷炫的路由动画效果
现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBu ...
- 20个Flutter实例视频教程-第05节: 酷炫的路由动画-1
视屏地址: https://www.bilibili.com/video/av39709290/?p=5 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2
博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...
- 067——VUE中vue-router之使用transition设置酷炫的路由组件过渡动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE - 路由跳转时设置动画效果
/* 为对应的路由跳转时设置动画效果 */ <transition name="fade"> <router-view /> & ...
- react实现页面切换动画效果
一.前情概要 注:(我使用的路由是react-router4) 如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升: but the 问题是 ...
- vue2.0 仿手机新闻站(七)过滤器、动画效果
1.全局过滤器 (1)normalTime.js 自定义 将 时间戳 转换成 日期格式 过滤器 /** * 将 时间戳 转换成 日期格式 */ export const normalTime = ( ...
- flutter 路由动画
import 'package:flutter/material.dart'; import 'package:flutter_app/pages/FirstPage.dart'; void main ...
随机推荐
- Keras 回归 拟合 收集
案例1 from keras.models import Sequential from keras.layers import Dense, LSTM, Activation from keras. ...
- POJ1273【网络流】
Drainage Ditches Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 91824 Accepted ...
- 配置hosts快速访问GitHub
经常要clone github中的一些项目,无奈如果不爬梯子的话速度实在是龟速,经常1k/s,于是搜了下解决方法,改HOSTS大法.Windows下在C:/Windows/system32/drive ...
- PP: Shallow RNNs: a method for accurate time-series classification on tiny devices
Problem: time series classification shallow RNNs: the first layer splits the input sequence and runs ...
- 在IIS中配置申请的SSL证书
第一步,右键服务器证书=>打开功能 第二步,右侧选择导入,将申请到的证书按窗体内容导入即可 第三步,右键需要加载证书的网站,选择编辑绑定=>类型选择https=>选择刚才导入的数字证 ...
- python3练习100题——029
原题链接:http://www.runoob.com/python/python-exercise-example29.html 题目:给一个不多于5位的正整数,要求:一.求它是几位数,二.逆序打印出 ...
- Codeforces1295D. Same GCDs (欧拉函数)
https://codeforces.com/contest/1295/problem/D 设gcd(a,m)= n,那么找gcd(a +x ,m)= n个数,其实就等于找gcd((a+x)/n,m/ ...
- MySQL语法规范
不区分大小写(规范:关键字大写,表名列名小写) 每条命令用 :结尾 每条命令可以根据需要进行 缩进或换行. 最标准的模板: 关键字 对象 关键字 对象 注释:用于解释说明,编译器会自动忽略 单行注释: ...
- 2019-08-10 纪中NOIP模拟B组
T1 [JZOJ1235] 洪水 题目描述 一天, 一个画家在森林里写生,突然爆发了山洪,他需要尽快返回住所中,那里是安全的. 森林的地图由R行C列组成,空白区域用点“.”表示,洪水的区域用“*”表示 ...
- python之路函数
1.函数参数,引用 2.lambda表达式 lambda表达式 f1 = lambda a1,a2: a1+a2 3.python的内置函数 abs(),绝对值 all(),循环参数,如果每个元素都为 ...