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 对象链式操作测试代码
Apr 25 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
vue实现select下拉显示隐藏功能
Sep 30 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
用原生js做单页应用
2017/01/17 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
中医专业应届生求职信
2013/11/17 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
2016年元旦致辞
2015/08/01 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
Vue如何清空对象
2022/03/03 Vue.js
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript