在 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: 过渡结束状态.
详细可参考官方文档 https://cn.vuejs.org/v2/guide/transitions.html
提示: 当你对过渡定义一个名称, 这就是默认的名称. 类名的格式为 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 的网站: learnVue https://learnvue.co/newsletter/
来源: https://www.cnblogs.com/GeniusLyzh/p/12219020.html