过渡效果的艺术：CSS transition 让网页交互更平滑（上）

前端开发工程师、技术日更博主、已过CET6
阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

一、引言

CSS transition 的定义和作用

CSS transition 是一种CSS属性，用于在某个属性值发生变化时，平滑地改变属性值。这在创建动画和过渡效果时非常有用。

CSS transition 的定义如下：

transition: property duration timing-function delay;

• property：要应用过渡效果的 CSS 属性名称。
• duration：过渡效果持续的时间，单位为秒或毫秒。
• timing-function：过渡效果的时钟函数，用于定义过渡的速度。常见的函数有 ease、linear、ease-in、ease-out 和 ease-in-out。
• delay：过渡效果延迟的时间，单位为秒或毫秒。

CSS transition 的作用是在属性值发生变化时，平滑地改变属性值，从而创建动画和过渡效果。这在设计响应式网站和用户友好的交互体验时非常有用。

例如，以下 CSS 代码使元素在鼠标悬停时平滑地改变颜色：

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: red;
}

在这个示例中，.box 元素的背景颜色在鼠标悬停时会在 0.5 秒内平滑地从蓝色变为红色。

transition 在用户体验中的重要性

Transition 在用户体验中的重要性主要体现在以下几个方面：

1. 提高用户注意力：平滑的过渡效果可以吸引用户的注意力，使页面更加生动有趣。例如，在网页中使用平滑的过渡效果可以提高用户体验。

2. 提高用户满意度：平滑的过渡效果可以提高用户对网站或应用程序的满意度。当用户在执行操作时看到平滑的过渡效果，他们可能会觉得更加舒适和满意。

3. 提高用户信任感：平滑的过渡效果可以提高用户对网站或应用程序的信任感。当用户看到平滑的过渡效果时，可能会认为网站或应用程序更加专业和可靠。

4. 改善用户体验：平滑的过渡效果可以帮助改善用户体验，使页面更加易于使用和理解。例如，在用户导航到新的页面时，平滑的过渡效果可以提高用户体验。

总之，transition 在用户体验中的重要性在于它可以提高用户注意力、用户满意度、用户信任感和改善用户体验，从而使网站或应用程序更加成功。在实际应用中，可以根据具体需求和场景使用 transition 创建平滑的过渡效果，提高用户体验。

二、CSS transition 的基本语法

介绍 transition 属性的语法

transition属性是CSS中的一个属性，用于定义元素在属性值变化时的过渡效果。其基本语法如下：

selector {
  transition: property duration timing-function delay;
}

其中：

• selector 是指应用过渡效果的元素。
• property 是指要应用过渡效果的CSS属性名称。
• duration 是指过渡效果持续的时间，单位为秒或毫秒。
• timing-function 是指过渡效果的速度曲线，常见的值有 ease、linear、ease-in、ease-out 和 ease-in-out。
• delay 是指过渡效果延迟的时间，单位为秒或毫秒。

例如，以下CSS代码定义了一个名为.box的元素，当其宽度（width）发生变化时，会有一秒的过渡效果，速度为ease-in-out曲线：

.box {
  width: 100px;
  transition: width 1s ease-in-out;
}

当.box元素的宽度发生变化时，其大小会平滑地过渡，而不是立即改变，从而提供更好的用户体验。

解释 transition 的持续时间、延迟时间和动画函数

在CSS中，transition属性用于指定元素属性值在变化时如何进行过渡。其基本语法如下：

transition: property duration timing-function delay;

其中：

• property 是指需要应用过渡效果的CSS属性。
• duration 是指过渡效果的持续时间，单位为秒（s）或毫秒（ms）。这个值定义了过渡效果需要花费的时间。
• timing-function 是指过渡的动画函数。这个值定义了属性值如何随时间变化。常见的函数有 ease、linear、ease-in、ease-out 和 ease-in-out。
• delay 是指过渡效果的延迟时间，单位为秒（s）或毫秒（ms）。这个值定义了过渡效果开始之前的延迟时间。

例如，以下CSS代码定义了一个名为.box的元素，当其宽度（width）发生变化时，会有一秒的过渡效果，延迟半秒后开始，速度为ease-in-out曲线：

.box {
  width: 100px;
  transition: width 1s ease-in-out 0.5s;
}

在这个示例中，.box元素的宽度会平滑地过渡，而不是立即改变，从而提供更好的用户体验。过渡效果会在宽度值发生变化后半秒开始，并持续一秒。

持续时间（duration）定义了过渡效果的时长，延迟时间（delay）定义了过渡效果开始之前的等待时间，而动画函数（timing-function）则定义了过渡效果的速度曲线。这些值一起控制了过渡效果的行为，从而影响用户体验。

三、CSS transition 的应用

在按钮、链接和菜单上的应用

在按钮、链接和菜单上使用 CSS transition 属性，可以增强用户体验，使界面更加平滑和易用。以下是一些应用案例：

1. 按钮：

例如，可以给按钮添加一个点击效果，使按钮在点击时平滑地放大和缩小。

button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  transform: scale(1.1);
  background-color: #555;
}

2. 链接：

例如，可以给链接添加一个悬停效果，使链接在悬停时平滑地改变颜色。

a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #555;
}

3. 菜单：

例如，可以给菜单添加一个展开和折叠效果，使菜单在展开和折叠时平滑地改变大小和位置。

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav li {
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

nav li:hover {
  background-color: #555;
}

在上述案例中，通过使用 CSS transition 属性，可以创建平滑和自然的用户界面动画，提高用户体验。

实现元素的淡入淡出效果

要实现元素的淡入淡出效果，可以使用CSS的opacity属性结合transition属性。以下是一个简单的例子：

.fade-in {
  opacity: 0;
  transition: opacity 1s ease;
}

.fade-in-active {
  opacity: 1;
}

在这个例子中，我们创建了两个类：.fade-in和.fade-in-active。.fade-in类将元素的透明度设置为0，并设置transition属性，使透明度在1秒内平滑地变化。.fade-in-active类将元素的透明度设置为1，即完全不透明。

要激活淡入淡出效果，只需将.fade-in类应用到目标元素，然后在使用JavaScript（或其他编程语言）将.fade-in-active类添加到目标元素。这样，目标元素将在1秒内从完全透明渐变为完全不透明。

例如，在HTML中：

<div class="fade-in">这是一个淡入淡出的元素。div>

<script>
  setTimeout(() => {
    document.querySelector('.fade-in').classList.add('fade-in-active');
  }, 1000);
script>

在这个例子中，我们使用setTimeout函数在1秒后（1000毫秒）将.fade-in-active类添加到.fade-in元素，从而实现淡入淡出效果。

创建平滑的滚动效果

要创建平滑的滚动效果，可以使用CSS的scroll-behavior属性结合transition属性。以下是一个简单的例子：

html {
  scroll-behavior: smooth;
}

body {
  scroll-transition: all 0.3s ease;
}

在这个例子中，我们首先通过scroll-behavior属性设置了整个页面的滚动行为为平滑。然后，通过scroll-transition属性设置了滚动过渡效果，使所有滚动属性（包括scroll-behavior）在0.3秒内平滑地变化。

现在，当用户在页面中滚动时，滚动过程将更加平滑。注意，scroll-behavior属性仅适用于支持该属性的浏览器，且仅影响scroll事件。对于其他滚动方式（如鼠标滚轮或触摸设备），可能需要使用JavaScript或其他编程语言来实现平滑滚动效果。