前言
本来是准备接着前面做的那个 使用SVG实现动态分布的圆环发散路径动画 的效果，希望通过 纯 Div + CSS 的方式来实现。但是目前看起来进度比较缓慢，虽然做出来了大致样式，但是动画还没加上，所以得后面再继续弄。
今天主要是通过写一个 “伪3D” 的卡片组效果，顺道也复习一下基础的 CSS 动画。
因为作者平时都是写的后台管理的项目，所以接触 CSS 动画之类的东西也比较少，实现方式和效果看起来可能没有那么好，希望大家多多包涵。
开始
本身这里最初的设想是希望 像打牌那样的初始效果，然后 通过点击卡片抽出单张选中卡片预览，再加上一些简单的过渡动画。不过后来又觉得 直接做成平铺列表然后选中卡片移动到最右侧 的效果也行，所以干脆都加上算了。
当然为了保证正确的层级关系，还是使用了 定位配合 zIndex 来确定每个卡片的 层级顺序和位置。
卡片的排列模式也是通过一个变量来确定的，然后增加了一个切换按钮，后面如果有需要的话改成 props 配置也行。
话不多说，直接开干吧。
模拟数据
当然，在开始之前肯定要 模拟一个卡片数组 cards 与一个排列模式变量 clutter。
data() { return { activeIndex: -1, clutter: true, // 杂乱 cards: [] }; }, created() { this.initData(); }, methods: { initData() { const arr = new Array(12).fill(1); this.cards = arr.map((_, index) => { return this.computedStyle(index, 12); }); }, resetData() { this.clutter = !this.clutter; this.initData(); }, computedStyle(index, length) { const clutter = this.clutter; const defaultStyles = { "--max-index": length + 1, "--bg-color": randomRgbColor(), "--card-index": index }; return defaultStyles; } }
这里的 initData 和 resetData 肯定就不需要介绍啦，就是重置和切换排列模式，当然因为改变排列模式后样式也有改动，所以在resetData 中也重新调用了initData来重新生成卡片数组。
至于computedStyle则是 计算每个卡片的样式并返回样式结果的，不管什么排列模式下 这几个 CSS 变量都是必须且固定的，所以就先放上来了。
data 中的activeIndex 则是代表当前激活的卡片下标的。
键盘事件
这里的初衷是为了方便 快速切换激活卡片、在卡片太多时也可以减少误触。
这里唯一注意的一点就是，在执行键盘监听事件的时候，需要判断一下当前的 focus 元素，如果是在一些可聚集的元素中则不能触发翻页。
mounted() { let addIndex = () => { if (this.activeIndex < this.cards.length - 1) { this.activeIndex++; } else { this.activeIndex = 0; } }; let lessIndex = () => { if (this.activeIndex > 0) { this.activeIndex--; } else { this.activeIndex = this.cards.length - 1; } }; let keyboardDeal = (e) => { if (document.activeElement !== document.body) return; // 方向键--上 if (e.keyCode === 38) { addIndex(); } // 方向键--下 if (e.keyCode === 40) { lessIndex(); } // 方向键--左 if (e.keyCode === 37) { lessIndex(); } // 方向键--右 if (e.keyCode === 39) { addIndex(); } }; window.addEventListener("keyup", keyboardDeal); this.$on("hook:beforeDestroy", () => { window.removeEventListener("keyup", keyboardDeal); }); },
另外，这里通过 this.$on("hook:beforeDestroy") 来注册组件 在销毁之前需要执行的回调函数，功能与选项式 API 中的 beforeDestroy 配置项功能一致。
在组件即将销毁时，会清除掉组件中的键盘监听事件。
通过document.activeElement 是否等于 body 元素，来确定当前焦点位置。一般只有在该属性等于body的时候，才代表当前页面中没有其他聚焦元素，可以正常执行我们定义的按键翻页。
模板
至于 html 部分，倒是没有太多细节的内容，仅仅只是 Vue 的遍历语法和动态样式两个知识点，相信大部分同学都很清楚。
<template> <div class="AnimationCards"> <h1>AnimationCards Page</h1> <p> <el-button @click="resetData">乱序</el-button> </p> <div class="demo-content"> <div class="animation-cards-box"> <div v-for="(styles, index) in cards" :class="[ 'animation-card', { 'is-active': activeIndex === index, 'is-clutter': clutter, 'is-list': !clutter } ]" :key="index" :style="styles" @click="activeIndex = activeIndex === index ? -1 : index" > <span>Card {{ index }}</span> </div> </div> </div> </div> </template>
这里动态绑定的 is-clutter 和 is-list 其实也可以放到父级 animation-cards-box 中。
至于每个 card 元素动态绑定的 style，里面有定义好的 CSS 变量，提供给每个卡片的动画和默认样式使用。这个用法我在之前的文章中也提到过，标签的内联样式也可以直接声明 CSS 变量。
样式与动画
因为采用了两种排列方式，每种排列方式的动画都不一样，所以样式和动画都有不同。
但是因为共同都是采用的定位来确定层级的，所以也有一样的地方。
下面这部分是一样的样式部分：
.animation-cards-box { width: 100%; height: 100%; box-sizing: border-box; padding: 20px; position: relative; .animation-card { width: 200px; background-color: var(--bg-color); border-radius: 8px; cursor: pointer; position: absolute; top: 20px; bottom: 20px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8); transition: all ease-in-out 0.4s; display: flex; justify-content: center; align-items: center; font-size: 32px; font-weight: bold; color: #ffffff; z-index: var(--card-index); } }
通过上面模板部分绑定的 CSS 变量来确定具体样式。
列表状态
在列表分布的状态下，所有卡片 依次向右排布，后面的卡片覆盖前面的卡片；在卡片被激活后，会移动到最右侧最顶层显示，大致效果如下：
1. 所以，首先是正常情况下的分布样式
.animation-card.is-list { &:hover { & ~ .animation-card { transform: translateX(24px); } } &.is-active { z-index: var(--max-index) !important; transform: translateX(calc(var(--max-index) * 20px - var(--card-index) * 20px - 40px)); } }
在 hover 时，所有 后面的兄弟节点会向右移动 20px；激活后（is-active），被激活的卡片会通过 zIndex 置顶，并通过 transform 向右平移到 最右侧。
2. 然后，是 js 中的 computedStyle 样式计算，按顺序每个卡片向右移动 16 px（后面可以根据需求修改）：
computedStyle(index, length) { const clutter = this.clutter; const defaultStyles = { "--max-index": length + 1, "--bg-color": randomRgbColor(), "--card-index": index }; if (!clutter) defaultStyles["left"] = `${16 * ++index}px`; return defaultStyles; }
3. 最后，是列表横向排布时的动画帧。
@keyframes eject { 50% { transform: translateX(calc(-100% - 20px)) rotate(-20deg); } } @keyframes reject { 50% { transform: translateX(calc(100% + 20px)) rotate(10deg); } }
这里区分了 非激活 -> 被激活 的 eject 和 从被激活 -> 非激活状态的 reject 两个动画：
- eject ：动画中间状态是 整体 向左偏移 整个卡片宽度加上 20px 的距离，并向左稍微旋转 20deg
- reject ：动画中间状态是 整体 向右偏移 整个卡片宽度加上 20px 的距离，并向右稍微旋转 10deg
另外eject的动画时间比reject 多一倍，也是为了把注意力集中在被激活卡片。
本身我是希望最后才把 zIndex 设置成最大值的，但是因为用了CSS变量的关系，动画帧定义不知道咋写了。如果有大佬知道也请告诉我一下，非常感谢~~
扇形乱序分布
这也是我里边说“乱序”状态吧，因为最初的一版卡片分布是按下标依次一左一右排列的，所以顺序有一点问题；不过后面也加了一个完整扇形的效果。
基础样式与列表状态一样，有区别的只是 激活/非激活的样式计算和动画定义部分。
这个效果大概像这样：
1. 首先，一样是两个状态的样式定义：
.animation-card.is-clutter { transform: translateX(0%) rotate(var(--rotate-deg)); transform-origin: bottom center; &.is-active { animation: rotation ease-in-out 0.8s; transform: translateX(calc(120%)) rotate(0deg); z-index: var(--max-index) !important; } }
因为是 类似扇形的效果，需要保证旋转轴的位置在底部，所以需要设置 transform-origin。
- 正常状态 下，卡片只是稍微旋转
- 被激活状态 下，卡片会平移到最后侧并取消旋转角度，同时置顶
2. 然后，是样式计算部分
computedStyle(index, length) { const clutter = this.clutter; const defaultStyles = { "--max-index": length + 1, "--bg-color": randomRgbColor(), "--card-index": index }; if (clutter) { let rotate = 0; if (index % 2 === 1) { rotate = length - index; } else { rotate = index - length; } defaultStyles["--rotate-deg"] = rotate + "deg"; } return defaultStyles; }
根据下标的奇偶性，分别向左、向右旋转特定角度。
3. 最后，就是动画定义
这里为了方便，只定义了 从 非激活 -> 激活状态 的动画，取消激活时则是直接通过 transition 定义的一个过渡效果。
@keyframes rotation { 0% { transform: translateX(0%) rotate(var(--rotate-deg)); } 60% { transform: translateX(calc(130%)) rotate(2deg); } 70% { transform: translateX(calc(110%)) rotate(-2deg); } 80% { transform: translateX(calc(125%)) rotate(1deg); } 90% { transform: translateX(calc(115%)) rotate(-1deg); } 100% { transform: translateX(calc(120%)) rotate(0deg); } }
这里动画 初期依旧保持正常状态，到 60% 时到达目标区域，后面的过程就是一个轻微晃动的效果，在100% 时停留在目标位置。
扇形正序
早上突然发现，正序其实修改不大，只需要调整 computedStyle 方法即可。
computedStyle(index, length) { const clutter = this.clutter; const defaultStyles = { "--max-index": length + 1, "--bg-color": randomRgbColor(), "--card-index": index }; const tangle = 48; const unitArc = tangle / length; if (clutter) { let rotate = unitArc * index - 48 / 2; defaultStyles["--rotate-deg"] = rotate + "deg"; return defaultStyles; }
这里的 tangle 是两边的最大旋转角度，可以根据需要自定义。unitArc 则是单位旋转角度，然后 初始角度 则是在左边 二分之一 tangle 的位置。
此时，显示效果就是这样了：
最后
当然本文个人感觉干货不是很多，只是在平时突然想到的一点儿小点子，但是动画效果其实不是很完美。只希望能给大家带来一点小小的灵感吧~~~
