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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
js替代copy(示例代码)
Nov 27 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
了解JavaScript中let语句
May 30 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
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
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
javascript每日必学之继承
2016/02/23 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python如何在循环引用中管理内存
2018/03/20 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
大型公益活动策划方案
2014/08/20 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2014年变电站工作总结
2014/12/19 职场文书
大学生在校表现评语
2014/12/31 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
mysql序号rownum行号实现方式
2022/12/24 MySQL