CSS 当过渡结束时应用 CSS 属性

在本文中，我们将介绍如何在 CSS 过渡结束后应用 CSS 属性。CSS 过渡是一种动画效果，通过过渡属性和持续时间来实现元素的平滑过渡。在 CSS 过渡中，过渡结束事件 transitionend 可以用来捕获过渡是否已结束。我们可以利用这个事件来应用额外的 CSS 属性，以实现更复杂的动画效果或状态变化。

阅读更多：CSS 教程

使用 `transitionend` 事件监听过渡结束

要在过渡结束后应用 CSS 属性，我们首先需要监听过渡结束事件 transitionend。在 DOM 元素上绑定这个事件，并在事件处理程序中添加我们想要应用的 CSS 属性。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: width 1s;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box');

    function handleTransitionEnd() {
      box.style.backgroundColor = 'blue';
    }

    box.addEventListener('transitionend', handleTransitionEnd);
  </script>
</body>
</html>

在上面的示例中，我们有一个带有过渡效果的红色方块。当过渡结束时，我们通过修改背景色为蓝色来应用额外的 CSS 属性。通过添加事件监听器并在事件处理程序中更改 CSS 属性，我们可以在过渡结束时触发相应的动作。

注意，transitionend 事件在每个 CSS 属性过渡完成时都会触发，因此我们需要根据实际情况判断是否所有过渡都已结束。

应用不同的 CSS 属性和值

除了上述示例中的背景色之外，我们还可以应用其他 CSS 属性和值。以下是一些常见的示例：

修改元素的透明度

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      opacity: 1;
      transition: opacity 1s;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box');

    function handleTransitionEnd() {
      box.style.opacity = 0.5;
    }

    box.addEventListener('transitionend', handleTransitionEnd);
  </script>
</body>
</html>

在这个示例中，我们通过改变透明度来应用额外的 CSS 属性。在过渡结束后，我们将元素的透明度从 1 改为 0.5。这样可以实现元素从不透明变为半透明的过渡效果。

改变元素的位置

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transform: translateX(0);
      transition: transform 1s;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box');

    function handleTransitionEnd() {
      box.style.transform = 'translateX(100px)';
    }

    box.addEventListener('transitionend', handleTransitionEnd);
  </script>
</body>
</html>

在这个示例中，我们通过改变元素的 transform 属性来改变元素的位置。当过渡结束时，我们将元素沿 X 轴正向移动 100px。这样可以实现元素的平移效果。

切换 CSS 类

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: background-color 1s;
    }

    .box.blue {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box');

    function handleTransitionEnd() {
      box.classList.add('blue');
      // 或者使用以下代码来切换 CSS 类
      // box.classList.toggle('blue');
    }

    box.addEventListener('transitionend', handleTransitionEnd);
  </script>
</body>
</html>

在这个示例中，我们通过切换 CSS 类来应用其他 CSS 属性。当过渡结束时，我们将元素的背景色更改为蓝色。通过使用 classList 对象的 add 方法，我们可以添加一个指定的 CSS 类，从而修改元素的样式。

总结

在本文中，我们学习了如何在 CSS 过渡结束后应用 CSS 属性。通过监听 transitionend 事件并在事件处理程序中应用所需的 CSS 属性，我们可以实现更丰富的动画效果和状态变化。我们还探讨了如何修改元素的透明度、位置以及如何切换 CSS 类来实现不同的效果。希望这些技巧可以帮助您更好地运用 CSS 过渡和动画。