Vue组件如何实现长尾词的景深卡片轮播效果？

本文共计2521个文字，预计阅读时间需要11分钟。

目录+前言+需求拆解+开发思路（Vue2）+开发过程+后记+前言+朋友的伙伴做了一个首页，首页用到的是一个卡片轮播，大体上是这样的：+第一版他们开发出来了，但有很多bug，希望我帮忙赶紧改一下。

目录

• 前言
• 需求拆解
• 开发思路(vue2)
• 开发过程
• 后记

前言

朋友的朋友做了个首页，首页用到一个卡片轮播，大概就是这个样子的：

第一版他们是开发出来了，但是各种bug，希望我帮忙改一下。

看完代码以后，发现他们整合了一个缝合怪出来，各个楼层都是从其他地方 CV 过来的，而且各个楼层引用了 n 多个js 和 css 文件，看了一下效果以后，觉得改他的东西确实比重新开发一个要麻烦的多得多，所以就重新写了一下。

在此记录一下，以便于后续复用。

需求拆解

• 初始化渲染5个容器，用来承载图片和标题，按照景深的效果排列，越靠近自己越大。
• 点击中间一块的左边的整体向右旋转一格，点击右边的向左旋转一格，点击中间的没有效果。
• 中间一项显示 content 和 查看更多 按钮，其他不显示。

开发思路(vue2)

• 景深效果可以选择使用 css3 的转换来制作，通过对每个容器进行不通比例的缩放来实现5个容器大小不一致的效果。
• 因为使用到了css3的转换，就需要用到过渡，动画效果就使用 transition-group 来实现。