Vue.js动画在项目使用的两个示例

李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js、vue.js等技术,热爱新技术,热爱编程。

vue.js的文档对于动画的使用做了很多的介绍,不熟悉的小伙伴可以先了解一下

下面就进入正题啦!

第一个动画示例:

这其实是一个很常见的弹出层效果,鼠标点击按钮切换弹出层的显示,点击其他区域弹出层消失,用javascript绑定事件可能几行代码就搞定了,但是vue.js的状态驱动模式和javascript的事件驱动模式是不同的,下面是使用vue.js的实现方式:

鼠标点击button会切换一个布尔值show,用show来控制弹出层的显示,而包裹着<transition>标签的弹出层在show的状态改变时就会触发动画,下面就可以用css3写一个弹出层的动画:

关于不同的过渡状态对应的css声明,官网上是这样解释的:

v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。

v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后移除。

相对于jQuery来说,vue.js的动画效果完全带来了一种全新的体验。

那么如何点击其他区域让弹出层消失呢?

首先想到的是直接阻止按钮和弹出层的事件冒泡,然后给document绑定事件让弹出层消失。但是显然这种方法太简单粗暴了,使用的场景也很苛刻,要求页面中只有一个弹出层效果才行,虽然不建议使用,但是也提供了一种思路。

然后想到可以检验事件的target,如果target不是按钮和弹出层就可以让弹出层消失,这也是用jQuery 的常用写法,那么关键点就是用vue.js定位到按钮和弹出层,vm.$refs可以解决这个问题,使用 ref 为子组件指定一个索引 ID,在 JavaScript 中就可以直接访问子组件了。下面是实现过程:

这里定义了一个生命周期钩子mouted,也就是说在该vue实例绑定节点之后触发,在document绑定的事件里判断是不是按钮和弹出层,如果是则返回,否则将show的状态设置为false。

在写完这个之后我也去网上找了找有没有更好的思路可以实现,后来阅读了一下大名鼎鼎的vue.js框架Element这部分的源码,发现它也是这个思路实现了。大家有好的实现思路欢迎交流哈!

第二个动画示例:

第二个实例是关于标签页切换的,先看一下效果:

这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟节点,再用绝对定位把单选按钮定位在三个button上面,这样就可以用:checked伪类来单选按钮的兄弟元素,即对应的不同的层,我简单的写了一下DOM结构,大概就是这样:

那么用vue.js实现上述的效果,其实也有两种途径,一种使用vue-routervue-routervue.js的一个路由组件,在单页面应用中非常非常流行,如果切换的层数据量非常大的话,比如每个层都要有服务器进行大量的数据交互,那么强烈建议使用vue-router,因为vue-router在每次切换路由的过程中,都会自动销毁(destroyed)前面的组件,这样在频繁的操作中页面也不会卡,而且vue-router也定义了页面切换过程中的过渡动画

如果数据量并不复杂的话,可以直接通过vue.js定义切换状态来切换不同的层。

首先先把template和css写好:

其中introduce、chatbar、videobar分别代表三个需要跟随button切换的组件,接下来就可以给vue.js的button节点绑定事件来操控点击状态:

点击不同的button,会让active的状态改变,同时这个状态会作用到button上面,比如让被点击的button有个高亮的效果等等。

那么如何让active的状态作用到弹出层呢?其实定义一个computed函数就可以了:

大功告成!

好了,就说到这里啦,第一次发这么长的文章,贴出来的代码可能不能面面俱到,如有不足之处,欢迎各位大神们指教,给点个赞吧啦啦啦啦!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

李萌的专栏

1 篇文章4 人订阅

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小红豆的数据分析

小蛇学python(7)tkinter库的基本使用

最近做一个小项目,又将tkinter库重新温习了一遍。tk其实并不如很多网友说的那样一文不值,它确实不如QT,Wxpython功能强大,但是这也意味着它比较简单...

1051
来自专栏守候书阁

css写作建议和性能优化小结

还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于cs...

522
来自专栏编程心路

我谈 Markdown一级标题

最初学习的时候,都是边看视频,边用记事本来做笔记,需要使用很多缩进来体现出知识的层次关系,但复习的时候看着挺不方便的。为什么我不用 Word?因为我觉得记个笔记...

2084
来自专栏一“技”之长

iOS开发中行高灵活可变的UITableView的性能优化

        在新闻类,电商类等应用中,应用着大量的图文混排视图,在表视图UITableView中,开发者通常需要在如下代理方法中计算出当前cell填充内容后...

682
来自专栏HTML5学堂

HTML5项目开发备忘录

HTML5学堂:良好的项目开发,从缜密的分析与计划开始,充分的项目开发准备能够让之后的问题降低到最少,让我们的整体开发效率提升不少。精心准备了关于项目开发的相关...

3215
来自专栏向治洪

VectorDrawable与AnimatedVectorDrawable

VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。先来一个例子吧...

1855
来自专栏GIS讲堂

C#控件命名规范

1、 本规范是个人平时使用时为方便个人使用而制定的一套规范,有很多地方不易记忆与理解,后续在具体的使用过程中会做一定的改动。

733
来自专栏图像识别与深度学习

《Android》Lesson10-UI控件

2269
来自专栏我就是马云飞

一个精致的打钩小动画

前言 最近在看轻芒杂志的时候,看到一个动画很带感很精致; 恰好这段时间也在看【HenCoder】的自定义view教程(里面写得非常非常详细,也有相应的习题等等)...

1875
来自专栏大数据钻研

编写高性能HTML网页应用

你怎么能提高网页性能?   大多数开发者会通过JavaScript和图片来优化,通过服务器配置,压缩文件和合并文件 - 甚至调整CSS(合并小图片)。   可...

2464

扫码关注云+社区