CSS 中 transition 的使用（实现过渡效果）

CSS transition 属性允许您在元素属性从一个值更改为另一个值时为该元素添加过渡效果。这可以用于在不同状态之间切换元素时创建平滑的动画，例如当用户将鼠标悬停在元素上时，当元素被激活时，或当元素通过 JavaScript 改变状态时。

语法

CSS transition 属性的一般语法如下：

transition: property duration timing-function delay;

• property ：指定要应用过渡效果的 CSS 属性。
• duration ：指定过渡效果的持续时间。
• timing-function ：指定过渡效果的动画曲线。
• delay ：指定过渡效果的延迟时间。

示例

悬停效果

下面的示例将为元素在用户将鼠标悬停在元素上时添加一个过渡效果：

.element {
  transition: background-color 0.5s ease-in-out;
}

.element:hover {
  background-color: #ff0000;
}

当用户将鼠标悬停在元素上时，元素的背景颜色将从透明过渡到红色，过渡效果将持续 0.5 秒，并且使用 ease-in-out 动画曲线。

激活效果

下面的示例将为元素在用户点击元素时添加一个过渡效果：

.element {
  transition: background-color 0.5s ease-in-out;
}

.element:active {
  background-color: #ff0000;
}

当用户点击元素时，元素的背景颜色将从透明过渡到红色，过渡效果将持续 0.5 秒，并且使用 ease-in-out 动画曲线。

通过 JavaScript 实现的状态变化

下面的示例将使用 JavaScript 为元素添加一个过渡效果：

const element = document.querySelector('.element');

element.addEventListener('click', () => {
  element.classList.add('active');
});

.element {
  transition: background-color 0.5s ease-in-out;
}

.element.active {
  background-color: #ff0000;
}

当用户点击元素时，元素将添加 active 类，并应用背景颜色过渡效果。过渡效果将持续 0.5 秒，并且使用 ease-in-out 动画曲线。

浏览器支持

CSS transition 属性在所有现代浏览器中都得到支持。但是，一些旧浏览器可能不支持某些过渡效果，例如 ease-in-out 动画曲线。

总结

CSS transition 属性是一个强大的工具，可用于为元素添加过渡效果。这可以用于在不同状态之间切换元素时创建平滑的动画，例如当用户将鼠标悬停在元素上时，当元素被激活时，或当元素通过 JavaScript 改变状态时。