2020 年的简单 CSS 过渡

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

CSS 过渡效果可以为我们的 Web 应用程序注入活力，从流畅的下滑效果到元素淡出，如果没有这些效果，我们的应用程序会显得非常静态和乏味。

然而，尽管CSS过渡效果非常重要且备受支持，但人们对它的理解仍然存在严重偏差，许多开发者（包括我以前）都会犯直接复制粘贴自己不理解的代码的错误。这会导致代码难以维护，过渡效果也无法正常工作。

本文将通过提供一份简明指南来纠正这一问题，该指南将介绍如何使用 CSS 过渡来改进您的 Web 应用程序。

CSS 过渡

创建 CSS 过渡效果的代码非常简单：
transition:

height .25s ease-in

这种过渡句的写法是简写，你也可以这样写：

transition-property: height,
transition-duration: 0.25,
transition-timing-function: ease-in

我觉得这种写过渡句的方式会增加很多冗余，而且实际上使事情变得复杂。

这段代码的意思是，当高度发生变化时，我希望以 250 毫秒的速度过渡，而 ease-in 则表示我希望它缓慢开始。

我发现，只需查看以下代码即可轻松编写过渡动画，该代码清晰地说明了过渡属性的顺序：

transition: <property> <duration> <timing-function> <delay>

其中最容易被误解的部分是“缓入”，这并不奇怪，因为“缓入”的属性名称是“transition-timing-function”，说实话，这并没有让它变得更容易理解。

然而，这可以用很简单的方式解释：
Easing describes an animation's rate of change over time

就是这么简单！

我的变性过程应该开始得快一些？
还是开始得慢一些？
或者开始得慢，最后快一些？

以下是您可以传递给转换定时函数的值：

transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;

顺便提一下，你也可以使用cubic-bezier(n,n,n,n)我们将在示例中使用的方法。

我认为理论部分就到此为止吧，信不信由你，即使只有这些核心知识，你也已经走在理解过渡的道路上了。

学习 CSS 过渡效果的最佳方法是看示例。
我创建了一个非常简单的CodePen 示例，展示了我们这里讨论的所有内容。

正如你在 CodePen 中看到的，它非常简单，展示了一个球棒推动球的动作。（看起来可能不太对劲，但如果你点击“在 CodePen 上编辑”，就可以看到它的完整效果。）

那么，让我们逐一了解实现这一目标的各个步骤：

1. 蝙蝠

所以有时候最好考虑的是起始位置和结束位置，而不是过渡过程。基本上，我们想要的是移动球棒一定的距离，使其能够击中球，实现这一目标的代码如下：

.baseballbat.move{
  transform: translateX(200px) rotate(50deg);
}

这段代码非常简单，当应用 move 类时，translateX(200px)它会将球棒200px向右移动（可以使用 JavaScript 添加类）。

忽略旋转功能，我只是用它来把球棒展平，因为从我得到的图片来看，球棒指向了角落。

所以下一步就是过渡到棒球棒。

以下代码可以实现此功能。

.baseballbat{
  height: 250px;
  width: 200px;
  transform: rotate(50deg);
  margin-left: 30px;
  transition: transform 350ms ease-in;
}

这里需要重点关注的是：

transition: transform 350ms ease-in;

这是非常基础的，我们对属性应用一个转换transform，它将接受350ms并具有一个transition-timing-function of ease-in。

现在棒球棒的运动更加流畅了。

2. 球

现在，当棒球棒击中球时，我们需要移动球的位置。
和之前一样，我们首先关注球的最终位置，与棒球棒类似，我们添加一个 transform 属性：

.ball.move{
  transform: translateX(300px);  
}

当对球应用移动类时，它将300px向右移动。

到目前为止，一切都很好？

好的，和之前一样（可以看到一切都很相似），我们现在给球的 transform 属性添加一个过渡效果。
代码如下：

.ball{
  height: 100px;
  margin-left: 250px;
  top: -50px;
  transition: transform 550ms cubic-bezier(.02,.63,.79,1.33) 350ms;
}

好的，一切看起来都一样，我们对transform属性应用过渡效果，过渡效果会生效550ms，最后一个值是延迟，请注意，延迟与棒球棒的过渡长度相匹配，以确保球只有在球棒停止时才会移动。

所以这里有了一个新的数值：

cubic-bezier(.02,.63,.79,1.33)

三次贝塞尔曲线可以让我们实现更真实的过渡效果，你可以看到，使用三次贝塞尔曲线，球向前移动，然后向后移动，几乎就像球带有后旋一样。

三次贝塞尔曲线看起来可能很复杂，但其实不然。使用 cubic-bezier.com，您可以轻松创建炫酷的转场效果。只需在网站上稍作摸索，您就能完全掌握它，并轻松地将其复制粘贴到您的转场动画中。

概括

信不信由你，这就是使用转场效果所需的一切知识。转场效果如此简单，却仍然有很多开发者不理解，这真是令人难以置信。我希望通过这篇指南，能够让更多开发者学会学习如何使用工具，而不是简单地复制粘贴。

如有任何疑问/问题，请在下方留言。

感谢阅读。