初识vue动画效果

vue.js为我们提供了丰富的动画效果。以下介绍动画的基本使用

需求:点击按钮,实现图片的显示与隐藏,不使用动画的效果是这样的:

不使用动画.gif

具体代码

效果并不好,过于突兀。

既然是神仙姐姐,出入场的效果肯定要有仙气,不能突兀地蹦进蹦出

接下来,看下使用动画的效果是怎样的

具体代码

动画效果.gif

代码解析

关于vue.js的动画效果,在其文档中有很详细的说明,利用官方提供的api, 可以实现极为丰富酷炫的效果。惟一限制你的,是你的想象力!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林焕彬的专栏

iPhone X 适配手Q H5 页面通用解决方案

对于手Q 中的各业务来说,受 Phone X 影响的 H5 页面挺多,应该采取什么快速有效的办法来应对呢?

7.5K60
来自专栏前端知识分享

第122天:移动端开发常见事件和流式布局

可以看到,在京东各个模块的主容器中,都设置了最大最小宽度和宽度100%,而在导航区块中,由于一行有5个小区块,所以设置了宽度为20%,使得小区块也能达到自适应的...

27740
来自专栏前端杂货铺

样式化加载失败的图片

本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动,望读者见谅 加载失败的图片是比较丑陋的,比如 但是我...

38570
来自专栏武军超python专栏

2018年9月3日初识HTML超文本标记语言

javascript原名livescript,简称(js),因为当时公司和sun公司合作,为了营销考虑,让它看起来更像当时 特别火热的java,所以更名为ja...

18710
来自专栏一“技”之长

标签之美八——网页框架 原

其中属性设置的值可以是百分比,可以是固定值,*符号表示除了已经分配后的剩余空间。上面代码中每个html文件设置不同的背景颜色,效果如下:

13110
来自专栏前端知识分享

第123天:移动web开发中的常见问题

准备编辑这段时发现简书上已经有作者写了关于rem布局的介绍,并且他的设置比我所用的更加简洁,贴上地址供大家学习参考。 手机端页面自适应解决方案—rem布局进阶...

19920
来自专栏腾讯大数据的专栏

iOS 9对前端做了什么?

随着9月25日iPhone6s的发货,早已预订的人是不是心里开始有点小激动了。那么它的到来对于前端来说有哪些新东西? Force Touch 针对此次的3D ...

27950
来自专栏HTML5学堂

SVG - 创建SVG图片

SVG - 创建SVG图片 HTML5学堂:之前在绘图中使用到了SVG以及Canvas,因此决定最近将绘图类的知识和大家分享一下。从研究角度来说,SVG比Can...

50280
来自专栏青玉伏案

iOS开发之虾米音乐频道选择切换效果分析与实现

今天博客的内容比较简单,就是看一下虾米音乐首页中频道选择的一个动画效果的实现。之前用mask写过另外一种Tab切换的一种效果,网易云音乐里边的一种Tab切换效果...

29830
来自专栏前端杂货铺

隐藏的几种实现

 页面布局上隐藏,但是对屏幕阅读器可见的几种方式:      1, .h{position:relative; left:-900em;top:-900em;...

360120

扫码关注云+社区

领取腾讯云代金券