Vue-router 切换组件页面时进入进出动画方法


Posted in Javascript onSeptember 01, 2018

App.vue 代码

<template>

 <div id="app">
 <Header></Header>
 // 用transition 把切换组件页面的容器包含
 <transition name="slide-fade">
  <router-view></router-view>
 </transition>

 </div>
</template>



<script>
import Header from './components/header'
export default {
 name: 'app',
 components: {Header},

}

</script>
// 动画
<style scoped>
.slide-fade{
 position: absolute;left:0;right: 0;
}
.slide-fade-enter-active {
 transition: all 1.2s ease;
}
.slide-fade-leave-active {

 transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
{
 left:0;right: 0;
 transform: translateX(50px);
 opacity: 0;
}
</style>

以上这篇Vue-router 切换组件页面时进入进出动画方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
JavaScript运算符小结
Jun 03 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
vue实现简单加法计算器
Oct 22 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue 实现在函数中触发路由跳转的示例
Sep 01 #Javascript
jQuery实现表格隔行换色
Sep 01 #jQuery
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 #Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 #Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 #Javascript
vue router 跳转后回到顶部的实例
Aug 31 #Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 #Javascript
You might like
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
js判断节假日实例代码
2017/12/27 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
JS实现星星海特效
2019/12/24 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python实现字符串和数字拼接
2020/03/02 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
用python批量移动文件
2021/01/14 Python
党员思想汇报范文
2013/12/30 职场文书
给市场的环保建议书
2014/05/14 职场文书
新教师岗前培训方案
2014/06/05 职场文书
给老婆的道歉信
2015/01/20 职场文书
部队2015年终工作总结
2015/04/02 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书