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[js]获取url参数的代码
Oct 17 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
js中el表达式的使用和非空判断方法
Mar 28 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
使用php+xslt在windows平台上
2006/10/09 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
php简单中奖算法(实例)
2017/08/15 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
js读取cookie方法总结
2014/10/31 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Python识别html主要文本框过程解析
2020/02/18 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
大学活动策划书范文
2014/01/10 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2014年教研室工作总结
2014/12/06 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript