【Vue.js 入门与实战】--组件切换-应用切换动画和mode方式

简介: 【Vue.js 入门与实战】--组件切换-应用切换动画和mode方式

组件切换-应用切换动画和mode方式

 

当前组件已经可以实现正常切换,但是组件切换时有些突兀,这是需要添加动画来解决。

vue.js,点击起步,找到动画,多个组件的过渡,

多个组件的过渡简单很多 - 我们不需要使用 key attribute。相反,我们只需要使用动态组件

<transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component>

</transition>

只需要 component Transform 包起来。使用如下代码实现:

第一步:

  <transition>

<component :is=comName></component>

  </transition>

第二步:

 <style>

.v-enter,

.v-leave-to{

opacity:0;

transform:translateX(150px);

}

.v-enter-active,

.v-leave-active{

Transition: all 0.5s ease:

 </style>

 </head>

image.png

 此时执行会发现,有实现切换,但是有阴影出现。需要通过设置使其消失,此时应该写成:

 <style>

.v-enter,

.v-leave-to{

opacity:0;

transform:translateX(150px);

}

.v-enter-active,

.v-leave-active{

Transition: all 0.5s ease:

opacity:0;

transform:translateX(150px);

}

<transition mode=out-in>

 </transition>

 </style>

 </head>

<这是 mode 属性,设置组件切换时候的 模式>

 

 

相关文章
|
11天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
4天前
|
开发框架 JavaScript 中间件
中间件应用Koa.js(Node.js)
我们添加了两个中间件。第一个中间件记录请求的开始时间,并在下一个中间件执行完毕后计算并打印出请求的总时间。第二个中间件与之前的示例相同,它设置响应体为 "Hello World"
20 6
|
11天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
1天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
4 0
|
1天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
5 0
|
3天前
|
JavaScript
深入理解Vue生命周期钩子及其应用
深入理解Vue生命周期钩子及其应用
5 0
|
3天前
|
JavaScript 前端开发
深入理解Vue生命周期钩子及其应用
深入理解Vue生命周期钩子及其应用
7 0
|
4天前
|
JavaScript 中间件 API
中间件应用Express.js(Node.js)
我们定义了一个名为 `logger` 的中间件函数。它接受请求对象、响应对象以及下一个中间件函数作为参数。当接收到请求时,它会打印出请求的 HTTP 方法和 URL,然后调用 `next()` 函数来将控制权传递给下一个中间件或路由处理器。我们使用 `app.use()` 方法将 `logger` 中间件添加到了应用级别的中间件堆栈中,这意味着它将对所有请求生效。
12 3
|
5天前
|
数据采集 JavaScript 数据可视化
Node.js爬虫在租房信息监测与分析中的应用
Node.js爬虫在租房信息监测与分析中的应用
|
8天前
|
JavaScript 前端开发 开发者
JavaScript基础入门之浏览器控制台调试输出
本文章是对小白学习js的初级教程,也是我对自己学习经验的一种总结,文章大多采用使用案例加讲解,带动学习的方式.因为我们的天性总是喜欢有及时反馈的事物,但是学习是一个慢长的事情,而有结果的回应,才会更好的促进自己去学习,主要是对于javascript学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.