今天给大家分享3个超丝滑Vue卡片左右、上下滑动层叠组件VueCardSlide。

1、vue-tantan-stack

一款基于 vue.js 制作的仿探探效果滑动组件。支持左右拖动或点击按钮切换效果。

功能分析

堆叠滑动的功能很简单，用一张图概括就是

堆叠效果

堆叠图片效果在网上有大量的实例，实现的方法大同小异，主要通过在父层设定 perspective 及 perspective-origin，来实现子层的透视，子层设定好 translate3d Z轴数值即可模拟出堆叠效果。

// 图片堆叠dom

上面只是一组静态代码，我们希望得到的是vue组件，具体实现方法大家可以去参看源码。

安装

$ npm i vue-tantan-stack -S

使用组件

最后附上demo及项目地址

# demo地址https://warpcgd.github.io/vue-tantan-stack/# 仓库地址https://github.com/warpcgd/vue-tantan-stack

2、vue-card-slide

基于 vue2.x 构建的卡片拖动切换组件。和第一个有些类似，不过实现方式不一样，大家可以去看看。

项目结构

安装

$ npm i vue-card-slide -S

使用组件

# 项目github地址https://github.com/Carrie999/vue-card-slide

3、vue-slide-card

vue层叠卡片滑动切换、卡牌动态滑动切换效果。

大家可以根据需要自行定制一些酷炫的效果。

# demo地址http://www.yunfengzhijia.cn/git-demo/vue-slide-card/#/# 仓库地址https://github.com/Kevin-269581661/vue-slide-card

ok，就介绍到这里。感兴趣的小伙伴们可以去看下，欢迎交流分享。