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 26 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
jquery实现数字输入框
Feb 22 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 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 Memcached应用实现代码
2010/02/08 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
工程师求职简历的自我评价分享
2013/10/10 职场文书
自动化专业本科毕业生求职信
2013/10/20 职场文书
电子商务应届生求职信
2013/11/16 职场文书
大学生学习自我评价
2014/01/13 职场文书
学习三严三实心得体会
2014/10/13 职场文书
先进基层党组织材料
2014/12/25 职场文书
综合办公室岗位职责
2015/04/11 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
环保建议书作文300字
2015/09/14 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python