废话，可以跳过
在这个色彩斑斓的时代，各种app、各式各样的特效充斥着我们的眼球。在我看来，炫酷的特效在很大程度上是能够博取用户的好感，提高用户体验的。而这些酷炫的交互方式是没有界限的，所以一些好的app特效也可以为网页所用。以此为宗旨，我以vue为基础，将QQ空间的一些特效进行了重现，一来锻炼自己组件化开发的思维，熟悉vue的使用，二来也是希望为大家在一些特效的实现上提供一些思路。（本文重点讨论特效的实现原理，不作任何代码的解析）
本来是想用vue全家桶仿一个完整的QQ空间，但是写着写着，感觉这样做的意义其实并不大（其实就是犯懒了，还得花时间准备面试）。但又不想荒废掉原来的代码，所以就改吧改吧，然后做一个特效的分享。
技术栈
vuex： 没什么卵用，就是想证明我会用。
better-scroll：本来想用原生方法来做一些滑动的，事实证明这就是在浪费时间，因为我根本搞不定 :(
正文
弹出层特效
先讲一个最简单的特效，简单到我都不知道要怎么描述：
最中间的+图标是本体，点击之后显示一个弹层，然后播放8个图标的动画，控制8个图标的速度不同，达到一种动态，活泼的特效。第二次点击弹出层消失，值得注意的是弹出层必须要在动画播放完成之后才能消失，不然效果会很突兀，所以需要用到animationend事件。
窗户特效
这个特效恐怕没什么炫酷的，因为background-attachment 可以完美实现
在此之前我是完全不知道的，多谢指出。
我管它叫作窗户特效，因为它给我感觉就像一扇窗户：
这个特效主要做的事就使图片在顶部可以下拉刷新，而在向上滚动时又会跟随滚动，经过再三思考我决定这样实现这个效果：
真相就是这样0.0，两张相同的图片！只需要在滑动到顶部时使上层的图片透明，就可以轻松实现这个效果了。
这里还有一个特效就是顶部的标题栏的渐变、收缩、下拉刷新的效果，故意放慢了动态图的速度，就是想让大家注意到它。虽然实现的逻辑很容易理解，但是真正实现还是需要花一番功夫的，这里用到了 作用域插槽slot将组件的状态传递给slot。
可编辑导航列表
一个可编辑的导航列表，接受一组列表数据和初始需要显示的列表长度：
这个特效就花了我较多时间了，主要是卡在了如何切换弹出状态和正常状态，目前主要思路是--分离编辑状态和正常状态。具体的意思就是，给每个项再额外添加一个 index属性和translateY来记录它在编辑时的序号和位移。然后在切回正常状态时，再按照编辑后的序号重新排列每个项，重置位移，使列表的真实序列变为编辑后的序列，具体还有许多细节，大家想了解的话可以去看代码(有注释) ( :
简约弹框
这就是一个带有遮罩层的弹窗。值得一提的是，它是一个全局组件，可以显示传入的不同数据，这也是唯一一个有必要用到vuex的组件。弹窗的位置是根据点击的位置是否在屏幕的上半部分（下半部分），如果内容超过屏幕的一半--我也不知道会发生什么，反正不会好看就是了。最后那个小角就是一个旋转的小正方形：)
废话
这次的QQ空间特效分享就结束了，还有一些小特效没有实现，并且原本想解决一下移动端软键盘的问题的，最后还是不了了之（懒癌又犯了）。这是代码，大家拿去玩吧，万一玩出个什么bug就可以回来喷我了，反正我也不会鸟：>
QQ、邮箱：774061539--无业游民
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
