【译】如何使用Vue过渡效果来提升用户体验
在Vue应用中添加过渡效果是一个可以使你的项目感觉更专业的简单方法。通过提升用户体验,可以使你的网站留住更多的用户以及提高转化率。
只需要简单的处理就可以获得巨大的回报,何乐而不为?
在这个指南中,我们将带你了解关于Vue过渡效果的相关知识,从最基本的开箱即用的方法到创建自定义过渡效果。
准备好开始学习关于Vue的过渡了吗?让我们开始吧。
为什么还要使用过渡效果
大部分人会觉得过渡效果只是一种装饰,但是一个具有好的设计的过渡效果可以达到以下一些作用:
- 吸引用户的注意力
- 强调重要的信息
- 网站更加自然流畅
- 引导用户浏览你的网页
- 有助于创造更专业的品牌形象
以上所有的点可以很好地提升网站的用户体验以及提高转化率。双赢。
OK,现在我们知道了过渡效果对你的网站是极其的有帮助,让我们学习如果用Vue来实现这种效果吧。
创建一个Vue过渡效果
为了容纳广泛不同技术栈的开发者,VueJS提供了几种方法来实现过渡:
- 在CSS过渡和动画应用class
- 在过渡钩子函数使用JS实现操作DOM
- 使用第三方CSS/JS库
要使用以上哪一种方式取决于你现有的技术知识。如果是有更好的HTML/CSS经验,那你可以使用第一种。如果你是从React转过来的或者只有更多的JS经验,手动地操作DOM也是一个好的方式。
现在我们重点介绍使用CSS编写单个元素的动画效果。不过请放心,我们后续将介绍更高级的内容(多个元素,动态组建、例子)。
了解过渡组件
transition元素是一个容器,可以帮助你在元素上添加过渡功能。本质上,它设置了不同的函数钩子以及在变化的元素中添加calss,因此我们可以在不同的过渡阶段设置样式。
有6种不同的过渡class(3个进入的,3个离开的类),分别是:
1、v-enter/v-leave:过渡的开始状态;过渡离开开始状态。
2、v-enter-active/v-leave-active:过渡激活状态。
3、v-enter-to/v-leave-to:过渡结束状态。
详细可参考官方文档
提示:当你对过渡定义一个名称,这就是默认的名称。类名的格式为name-enter,name-enter-active等等。
下面我们看下添加过渡的简单方式。
格式化模版的代码非常简单。只需要将需要过渡效果的元素用组件包裹起来即可。就像这样:
<template>
<div>
<button @click='visible = !visible'>Toggle Div</button>
<transition name="fade">
<div v-if="visible">
Hello World
</div>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
visible: true
}
}
}
</script>
很简单,对吧?
现在,我们需要添加一些样式来实现真正的过渡效果了。
我们使用官方文档例子的一些样式:
<style lang="scss">
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
以上代码是做了什么?其实这个很直观,因为加了一些类似状态的类名。
这些样式说明当过渡激活的时候,对opacity属性添加过渡,使其平滑地变化。
然后,设置过渡进入开始状态和过渡离开的结束状态为零(不可见)。同时,要记住当元素没有设置fade-enter或者fade-leave-to类名,opacity将会设置回默认值。
好了。
可以在你的Vue应用里添加过渡效果了。现在,我们来继续深入,了解更多细节。
另外,你也可以使用CSS动画来实现过渡效果。
只有你能够使用合适的类名,就可以根据自己的喜好对这些组件进行样式设置。
下面来看看过渡效果的更高级用法。
在组件加载后使用过渡效果
超级简单,只需要在过渡元素添加一个appear属性即可,像这样:
<transition name="fade" appear>
<div v-if="visible">
Hello World
</div>
</transition>
多个元素使用过渡效果
同样地,这个也是超级简单。像下面那样两个div之间切换。
<transition name="fade" appear>
<div v-if="visible">
Option A
</div>
<div v-else>
Option B
</div>
</transition>
你所需要做的就是用transition元素将这些元素包裹起来,过渡效果就可以生效。
但需要注意以下几点:
当在两个元素之间应用Vue过渡效果时,有时两个元素都是可见的并且正在移入/移出。如果要达到一个平滑的效果,你可能需要将它们绝对定位在彼此的顶部。
如果元素具有相同的标签,Vue会进行优化而且只替换元素的内容,而不是重新销毁创建。根据官方文档,如果需要在多个元素之间进行转换,最佳实践就是在元素上添加一个key。
动态组件使用过渡效果
这个相对于上面的例子更加简单了。只需要把动态组件放在transition元素里面就可以了。例如:
<transition name="fade" appear>
<component :is='componentType' />
</transition>
创建一个可重用的过渡组件
使用slot创建一个可替换内容的组件,例如:
<template>
<transition name="fade" appear>
<slot></slot>
</transition>
</template>
最后
没什么好说的。Happpy Coding。
后记
以上译文仅用于学习交流,水平有限,难免有错误之处,敬请指正。
参考
【译】如何使用Vue过渡效果来提升用户体验的更多相关文章
- Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..
Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid Ap ...
- paip.提升用户体验--radio图片选择器 easyui 实现..
#paip.提升用户体验--radio图片选择器 easyui 实现.. =================================== ##原因... ------------------- ...
- paip.提升用户体验--提升java的热部署热更新能力
paip.提升用户体验--提升java的热部署热更新能力 想让java做到php那么好的热部署能力 "fix online"/在线修复吗??直接在服务器上修改源码生效,无需重启应 ...
- paip.提升用户体验----gcc c++ JIT-debugging 技术
paip.提升用户体验----gcc c++ JIT-debugging 技术 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http ...
- paip.提升用户体验-----c++ gcc 命令在notepad++扩展中的配置..
paip.提升用户体验-----c++ gcc 命令在notepad++扩展中的配置.. 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址: ...
- paip.提升用户体验---c++ qt 取消gcc编译的警告信息.txt
paip.提升用户体验---c++ qt 取消gcc编译的警告信息.txt 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...
- paip.提升用户体验---论文本编辑器的色彩方案
paip.提升用户体验---论文本编辑器的色彩方案 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.ne ...
- paip.提升用户体验---c++ qt自定义窗体(1)---标题栏的绘制
源地址:http://blog.csdn.net/attilax/article/details/12343625 paip.提升用户体验---c++ qt自定义窗体(1)---标题栏的绘制 效果图: ...
- 使用渐进式JPEG来提升用户体验
今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别 ...
随机推荐
- H3C 静态路由实现路由备份和负载分担
- H3C IEEE EUI-64格式
- 如何理解springMVC?
springMVC 工作原理? 简单理解:客户端发送请求-->前端控制器接受客户端的请求DispathServelt-->找到处理器映射HandMapping-->找到处理器hand ...
- springBoot中使用使用junit测试文件上传,以及文件下载接口编写
本篇文章将介绍如何使junit在springBoot中测试文件的上传,首先先阅读如何在springBoot中进行接口测试. 文件上传操作测试代码 import org.junit.Before; im ...
- apache WEB服务器安装(包括虚拟主机)
一.apache下载编译安装 yum install apr apr-devel apr-util apr-util-devel gcc-c++ wget tar -y cd /usr/src wge ...
- ASP.NET WebForm Identity使用
环境 win10企业版x64+visual studio 2017+.net 4.5 step1 基本使用+邮件确认+密码重置 https://docs.microsoft.com/en-us/asp ...
- Channel 9视频整理【3】
Will 保哥 微软mvp https://channel9.msdn.com/Niners/Will_Huang 繁体中文视频 Visual Studio 2017 新功能探索 https://ch ...
- c++ unordered_map 自定义key
C++11新增了一类散列容器包括unordered_set, unordered_map, unordered_multiset, unordered_multimap, 即之前熟悉的hash_set ...
- Visio文本相关操作
三种方式:双击形状输入文本,插入文本框, 文本工具 文本块工具 选择后可以对文本进行移动旋转 如果要给文本加入边框 直接显示线条就可以了 因为都是文本框 添加特殊文本: 插入符号 插入域 比如当前时间 ...
- 解析crash
命令行 1.查找 symbolicatecrash find /Applications/Xcode.app -name symbolicatecrash -type f 2.此时会出现一个路径 sy ...