如何用transition实现短视频APP的点赞动画

实现不同表情的不断上升

如果使用纯 CSS 实现这一整套动画的话。我们首先需要实现一段无限循环的，大量不同的表情不断向上漂浮的动画。

像是这样：

这个整体还是比较容易实现的，核心原理就是同一个动画，设置不同的 transition-duration，transition-dalay，和一定范围内的旋转角度。

我们首先要实现多个表情，一个 DOM 标签放入一个随机的表情。

我们可以手动一个一个的添加：

<ul class="g-wrap">    <li>?</li>    <li>❤️</li>    <li>?</li>    // ... 随机设置不同的表情符号，共 50 个    <li>...</li></ul>

当然，我个人觉得这样太麻烦。我习惯利用 SASS 的循环函数及随机函数，利用伪元素的 content 去随机生成不同表情。像是这样：

<ul class="g-wrap">    <li></li>    <li></li>    <li></li>    // ... 共50个空标签</ul>

$expression: "?", "?", "❤️", "?", "?", "?", "?", "?", "??", "?", "?", "?", "?", "?";.g-wrap {    position: relative;    width: 50px;    height: 50px;}@for $i from 1 to 51 {    li:nth-child(#{$i}) {        position: absolute;        较好: 0;        left: 0;        width: 50px;        height: 50px;                &::before {            content: nth($expression, random(length($expression)));            position: absolute;            font-size: 50px;        }    }}

这样，我们就能得到 50 个叠加在一起的表情：

因为透明度为 1 的缘故，只能看到最上面的几个表情，实际上这里叠加了 50 个不同的表情。

这里的核心就是 content: nth($expression, random(length($expression)))，我们利用了 SASS 的 random 和 length 和 nth 等方法，随机的将 $expression 列表中的表情，添加给了不同的 li 的 before 伪元素的 content 内。

接下来，我们需要让它们动起来。

这个简单，添加一个无限的 transform: translate() 动画即可：

@for $i from 1 to 51 {    li:nth-child(#{$i}) {        animation: move 3000ms infinite linear;    }}@keyframes move {    100% {        transform: translate(0, -250px);    }}

效果如下：

OK，由于 50 个元素都叠加在一起，所以我们需要将动画区分开来，我们给它们添加随机的动画时长，并且，赋予不同的负 transition-delay 值：

@for $i from 1 to 51 {    li:nth-child(#{$i}) {        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear;    }}@keyframes move {    100% {        transform: translate(0, -250px);    }}

效果如下：

效果已经非常接近我们想要的了！这里有一点点的跳跃，需要理解 move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear 这里大段代码：

#{random() * 2500 + 1500}ms 生成 1500ms ~ 4000ms 之间的随机数，表示动画的持续时长
#{random() * 4000 / -1000}s 生成 -4000ms ~ 0s 之间的随机数，表示负的动画延迟量，这样做的目的是为了让动画提前进行

如果你对负的 transition-delay 的作用还不了解，可以看看我的这篇文章 — 深入浅出 CSS 动画

到这，还是不够随机，我们再通过随机添加一个较小的旋转角度，让整体的效果更加的随机：

@for $i from 1 to 51 {    li:nth-child(#{$i}) {        transform: rotate(#{random() * 80 - 40}deg);        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear;    }}@keyframes move {    100% {        transform: rotate(0) translate(0, -250px);    }}

这里 transform: rotate(#{random() * 80 - 40}deg) 的作用就是随机生成 -40deg ~ 40deg 的随机数，产生一个随机的角度。

至此，我们就得到了这样一个效果：

利用 transition 化腐朽为神奇

到这里。很多同学可能还不明白，明明是点赞一次产生一个表情，为什么需要一次生成这么多不断运动的表情效果呢？

这是因为，由于 CSS 没法直接正面做到点击一次，生成一个表情，所以我们需要换一种思路实现。

如果这些表情一直都是在运动的，只不过不点击的时候，它们的透明度都为 0，我们要做的，就是当我们点击的时候，让它们从 opacity: 0 变到 opacity: 1。

要实现这一点，我们需要巧妙的用到 transition。

我们以一个表情为例子：

默认它的透明度为 opacity: 0.1
点击的时候，它的透明度瞬间变成 opacity: 1
然后，通过 transition-delay 让 opacity: 1 的状态保持一段时间后
逐渐再消失，变回 opacity: 0.1

看上去有亿点点复杂，代码会更容易理解：

li {    opacity: .1;    transition: 1.5s opacity 0.8s;}li:active {    opacity: 1;    transition: .1s opacity;}

效果如下：

一定要理解上面的代码！巧妙地利用 transition 在正常状态和 active 状态下的变化，我们实现了这种巧妙的点击效果。

如果我们把初始的 opacity: 0.1 改成 opacity: 0 呢？就会是这样：

好，我们结合一下上面两个动画：

我们将所有的表情，默认的透明度改为 0.1
被点击的时候，透明度变成 1
透明度在 1 维持一段时间，逐渐消失

代码如下：

@for $i from 1 to 51{    li:nth-child(#{$i}) {        position: absolute;        较好: 0;        left: 0;        width: 50px;        height: 50px;        transform: rotate(#{random() * 80 - 40}deg);        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s linear;        opacity: .1;        transition: 1.5s opacity .8s;                &::before {            content: nth($expression, random(length($expression)));            position: absolute;        }    }        li:active {        opacity: 1;        transition: .1s opacity;    }}@keyframes move {    100% {        transform: rotate(0) translate(0, -250px);    }}

效果如下：

嘿，是不是有那么点意思了！

好最后一步，我们通过一个点击按钮引导用户点击，并且给与一个点击反馈，每次点击的时候，点赞按钮放大 1.1 倍，同时，我们把默认表情的透明度从 opacity: 0.1 彻底改为 opacity: 0。

这样，整个动画的完整的核心代码：

<ul class="g-wrap">    <li></li>    <li></li>    <li></li>    // ... 共50个空标签</ul>

$expression: "?", "?", "❤️", "?", "?", "?", "?", "?", "??", "?", "?", "?", "?", "?";.g-wrap {    position: relative;    width: 50px;    height: 50px;    &::before {        content: "??";        position: absolute;        width: 50px;        height: 50px;        transition: 0.1s;    }    &:active::before {        transform: scale(1.1);    }}@for $i from 1 to 51 {    li:nth-child(#{$i}) {        position: absolute;        width: 50px;        height: 50px;        transform: rotate(#{random() * 80 - 40}deg);        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s cubic-bezier(.46,.53,.51,.62);        opacity: 0;        transition: 1.5s opacity .8s;        &::before {            content: nth($expression, random(length($expression)));            position: absolute;        }    }    li:active {        transition: .1s opacity;        opacity: 1!important;    }}@keyframes move {    100% {        transform: rotate(0) translate(0, -250px);    }}

这里，需要注意的是：