去哪儿-20-detail-animation

目标：在项目中添加一个基础动画效果

当点击详情页的图片轮播组件时，希望它能够显示出渐隐渐现的效果。

创建一个公共的渐隐渐现的组件src/common/fade/FadeAnimation.vue，并搭建基础框架。
单个组件的动画写法：

<transition><slot></slot>
</transition>

其中slot是外部组件插入进来的一个插槽。如果想让transition有一些动画效果，vue会在一些时间点上给transition标签插入一些class，借助这些class就可以实现动画效果了。

.v-enter, .v-leave-toopacity 0
.v-enter-active, .v-leave-activetransition opacity 0.5s

至此，这个动画组件就完成了。

动画组件的使用

首先将这个动画组件FadeAnimation.vue引入Banner.vue组件中并进行注册，接下来就可以直接使用了：

<fade-animation><common-gallery :imgs="bannerImgs" v-show="showGallery"@close="handleBannerGallery"></common-gallery>
</fade-animation>

这样的话common-gallery就会作为一个插槽，插入到FadeAnimation.vue组件中，FadeAnimation.vue中的slot代表的就是common-gallery，在动画组件FadeAnimation.vue中相当于是在common-gallery外部添加了一个动画效果，所以common-gallery进行展示或者隐藏的时候就会出现一个渐隐渐现的效果。

去哪儿-20-detail-animation相关推荐

梦想的地方！地球上最值得去的20个地方【组图】
如果你是一个热爱大自然的人你肯定会喜欢这个集合.地球上有太多的地方和风景值得我们这辈子至少要去看一次.大多数自然摄影师喜欢没有人出现在他们的照片中,他们想获得纯净.完美的风景,没有人类的影响.这篇文章 ...
JAVA开发者最常去的20个英文网站(转)
JAVA开发者最常去的20个英文网站 1.[http://www.javaalmanac.com] – Java开发者年鉴一书的在线版本. 要想快速查到某种Java技巧的用法及示例代码, 这是一个不错 ...
让学历见鬼去吧----20世纪最狂妄的校园演讲
爱因斯坦说过,"我学习中等,按学校的标准,我算不上是个好学生,不过后来我发现,能忘掉在学校学的东西,剩下的才是教育"?.我想,教育的真正目的不是制造文凭,而应当是解放一个人的脑袋. ...
Code爱好者必去的20个网站（开源项目托管网站）
开源国内社区收录了大量的开源软件,您会发现,其中绝大多数托管在sf.net.GitHub.code.google.com等站点上.其实不错的开源托管站点还真的是不少.笔者为您总结了如下国外知名的开源项 ...
java开发者最常去的20个英文网站
1.[http://www.javaalmanac.com] Java开发者年鉴一书的在线版本. 要想快速查到某种Java技巧的用法及示例代码, 这是一个不错的去处. 2.[http://www.o ...
matplotlib animation动画保存(save函数)详解
本文主要介绍matplotlib中animation如何保存动画,从matplotlib的一些基础代码说起,并在最后附上了解决save()函数报错的代码,其中的一些代码涉及到__getitem__() ...
《20年后，你靠什么生存（孙继滨）》讲座观后感
首先为身在广州,不能亲自去北京参加孙老师的<20年后,你靠什么生存(孙继滨)>讲座深感遗憾,同时非常的感谢51CTO工作人员从现场录制回来的视频,看着现场60多位跟自己一样对职业规划迫切渴 ...
推荐20个优秀企业技术博客
想获得第一手的新闻线索但无从下手?想确认最准确的行业动态但找不到来源?InfoQ编辑们的日常工作就是在第一时间内搜索.更新来自四面八方的新闻线索,收集最有价值的新闻信息.现在,向大家推荐InfoQ编辑 ...
《20年后，你靠什么生存（孙继滨）》讲座观后感转
标签:IT 职业生存规划 80后原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://bennie.blog.51cto.com/ ...
《Character Animation with Direct3D》阅读笔记
前言最近在搞动画这一块,网易Jerish大佬推荐我去看<Character Animation with Direct3D>这本书. 以下链接是我个人整理的资料: [Character ...

去哪儿-20-detail-animation

目标：在项目中添加一个基础动画效果

去哪儿-20-detail-animation相关推荐

最新文章

热门文章

去哪儿-20-detail-animation

目标： 在项目中添加一个基础动画效果

去哪儿-20-detail-animation相关推荐

最新文章

热门文章

目标：在项目中添加一个基础动画效果