vue的transition组件的使用

主要实现的是页面跳转的时候一个页面从左边出去,一个页面从右边进来,通过css3实现的,可以自己自行修改
html代码
<template><div id="app"><div class="router-parent"><transition :name="transitionName" mode="out-in"><router-view class="home-router"></router-view></transition></div></div>
</template>
js代码
export default {name: 'app',data () {return {transitionName: 'slide-right'}},components:{},computed: {}
}
css代码
.router-parent{position: relative;width: 100%;height: 100%;
}
.home-router {position: absolute;width: 100%;height: 100%;transition: all .5s ease;
}
.slide-left-enter,.slide-right-leave-active {opacity: 0;-webkit-transform: translate(-100%, 0);transform: translate(-100%, 0);
}.slide-left-leave-active,
.slide-right-enter {opacity: 0;-webkit-transform: translate(-100%, 0);transform: translate(-100% 0);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/517252.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kafka java.net.UnknownHostException: node4 Error connecting to node node4:9092

解决&#xff1a;修改kafka的server.properties文件 vim /kafka安装路径/config/server.properties 去除下面这行配置的注释&#xff0c;并设置对应的ip地址 #advertised.listenersPLAINTEXT://your.host.name:9092 advertised.listenersPLAINTEXT://192.168.92.104:9092 重启…

看全新升级的KubeSphere 3.0 如何助力企业在容器混合云时代乘风破浪?

数据时代&#xff0c;层出不穷的创新型业务对企业IT提出了更高的要求&#xff0c;业务、技术和管理方面的挑战也逐渐显现。对此&#xff0c;越来越多的企业希望能够快速、简单地创建企业应用&#xff0c;敏捷地满足业务创新的需求&#xff0c;同时还能维持极高的企业级服务水平…

5G的7大用途,你知道几个?

阿里妹导读&#xff1a;5G时代悄悄来临&#xff0c;甚至成为街头巷尾都在讨论的话题。相信你一定有过一些疑问&#xff1a;什么是5G&#xff1f;仅仅只是网速更快吗&#xff1f;5G如何做到毫秒级的延迟&#xff1f;网络切片是什么&#xff1f;5G的标准之争是怎么回事&#xff0…

ALive:淘宝双11直播,技术同学却可以“偷懒”?

“疯狂的”淘宝直播间 今年直播又火了&#xff01; 2019年双11淘宝直播带来近 200亿 成交&#xff0c;以天猫双11交易总额2684亿计算&#xff0c;直播已经占总成交额的近 7.45%&#xff01; 今年的变化 除了以往的手淘和猫客&#xff0c;现在 UC 浏览器、新浪微博、支付宝、…

虚拟机安装centos

到官网下载centos系统&#xff1a; https://www.centos.org/download/ 有三种选择&#xff08;DVD IOS&#xff0c;Everything IOS, Minimal IOS(精简版的)&#xff09;&#xff0c;建议使用DVD IOS 安装虚拟机&#xff1a; #选择典型安装&#xff1a; #选择稍后安装&#…

KAFKA SpringBoot2 Nacos 消息异步发送和消费消息(进阶篇)

文章目录一、基础集成1. 技术选型2. 导入依赖3. kafka配置4. auto-offset-reset 简述5. 新增一个订单类6. 生产者&#xff08;异步&#xff09;7. 消费者8. kafka配置类9.单元测试9. 效果图10. 源码地址11.微服务专栏一、基础集成 1. 技术选型 软件/框架版本jdk1.8.0_202spri…

看懂别人的代码,只是成为高效程序员的第一步!

作者 | SeattleDataGuy译者 | 弯月&#xff0c;责编 | 屠敏出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;在为面试做准备的时候&#xff0c;很多软件工程师都花费了大量时间做编程题和完善简历。最终在找到一份工作后&#xff0c;无论是在创业公司、Google、亚马…

开发者解读:为什么蚂蚁要用融合计算这种新计算模式?

导读&#xff1a;如今大部分人工智能应用是基于监督学习范式开发的&#xff0c;即模型在线下进行训练&#xff0c;然后部署到服务器上进行线上预测&#xff0c;这样的开发方式在实时响应上存在较大的局限。随着计算和 AI 体系逐步成熟&#xff0c;我们希望机器学习应用能更多地…

Vue-touch的使用

#####有时候我们不止需要有返回键&#xff0c;也要有手势滑动切换页面的功能时&#xff0c;这个时候vue-touch就派上用场了 #####API地址&#xff1a; https://github.com/vuejs/vue-touch/tree/next#####安装 npm install vue-touchnext --save //main.js中引入&#xff1a;…

响应速度不给力?解锁正确缓存姿势

阿里妹导读&#xff1a;响应时间长&#xff0c;遇到性能瓶颈时&#xff0c;开发者第一个想到的总是性能优化。《什么技能产品经理不会提&#xff0c;但技术人必须懂&#xff1f;》讲到了什么时候需要使用缓存。但缓存的用法是什么&#xff1f;一旦缓存使用不当&#xff0c;或稍…

Spring Boot2 集成 jasypt 3.0.4 配置文件敏感信息加密

文章目录1. 导入依赖2. yml中添加配置文件3. 加解密工具类4. 敏感信息替换5. 编译打包6. 启动项目1. 导入依赖 <!--敏感信息加密--><dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifa…

技术直播:1小时突击Java工程师面试核心(限免报名)

后疫情时代&#xff0c;连程序员这个多金的职业也遭受到了一定程度的打击。从各大招聘网站和多次面试经历中&#xff0c;相信大家已经意识到&#xff0c;面试官对程序员技能体系和项目经验考核似乎更严苛了。你在面试中常常为什么苦恼呢&#xff1f;简历撰写&#xff1f;数据算…

重塑云上的 Java 语言

音乐无国界&#xff0c;但是音乐人有国界。 云原生亦如此。虽没有限定的编程语言&#xff0c;但应用所使用的编程语言已经决定了应用部署运行的行为。 Java 诞生于20年前&#xff0c;拥有大量优秀的企业级框架&#xff0c;践行 OOP 理念&#xff0c;更多体现的是严谨以及在长…

在单页应用Vue中设置标题(title)

安装 npm install vue-wechat-title --save main.js引入 Vue.use(require(vue-wechat-title)) 路由定义 {path: /topay,name: ToPay,component: ToPay,meta: {title:结算}},{path: /orderinfo,name: OrderInfo,component: OrderInfo,meta: {title:订单详情}} 模板中使用 …

centos 7 安装golang遇到问题: No package golang available.

entOS 安装golang &#xff1a; yum install golang 时报错&#xff1a;No package golang available. 解决办法&#xff1a; # 先安装epel yum install epel-release# 然后再安装golang yum install golang# 查看安装的版本 go version

5分钟带你看懂 GCanvas渲染引擎的演进

本文内容大纲&#xff1a; 1、轻量级图形渲染引擎与应用 2、渲染引擎演进与优化之路 3、渲染引擎未来的发展方向 GCanvas 的定位是遵循 w3c 标准的跨平台的轻量级图形渲染引擎。有清晰的定位和目标&#xff0c;并且紧贴现有的业务&#xff0c;为业务提供丰富表现形式。 GCa…

免费技术直播:唐宇迪带你一节课了解机器学习经典算法

常常有小伙伴在后台反馈&#xff1a;机器学习经典算法有哪些&#xff1f;自学难度大又没有效果&#xff0c;该怎么办&#xff1f;CSDN为了解决这个难题&#xff0c;联合唐宇迪老师为大家带来了一场精彩的直播【一节课掌握机器学习经典算法-线性回归模型】。本次直播将帮大家了解…

Centos7 安装Go环境

文章目录1. 下载2. 解压 和目录创建3. 配置环境变量4. 刷新环境变量5. 验证1. 下载 https://golang.google.cn/dl/ wget https://golang.google.cn/dl/go1.17.1.linux-amd64.tar.gz2. 解压 和目录创建 tar -zxvf go1.17.1.linux-amd64.tar.gz -C /usr/local/ mkdir gocode3…

深度学习在商户挂牌语义理解的实践

​导读&#xff1a;高德地图拥有几千万的POI兴趣点&#xff0c;例如大厦、底商、学校等数据&#xff0c;而且每天不断有新的POI出现。为了维持POI数据的鲜度&#xff0c;高德会通过大量的数据采集来覆盖和更新。现实中POI名称复杂&#xff0c;多变&#xff0c;同时&#xff0c;…

云计算与星辰大海的结合——不要回答,来自百亿光年外的未知信号

作者 | 硬核云顶宫责编 | Carol出品 | CSDN云计算&#xff08;ID&#xff1a;CSDNcloud&#xff09;今年在疫情的影响下&#xff0c;各国的经济发展都遇到了一些困难&#xff0c;甚至除中国以外的主要经济体都会进入了负增长的情况&#xff0c;不过越是这样的时候&#xff0c;越…