CSS 在添加的元素上触发 CSS 过渡效果

在本文中，我们将介绍如何在添加的元素上触发 CSS 过渡效果。CSS 过渡效果是给元素添加动画效果的一种方法，让元素的属性值在一定的时间内平滑地进行过渡，而不是突然变化。

阅读更多：CSS 教程

CSS 过渡效果简介

CSS 过渡效果通过改变元素的属性值来实现动画效果。我们可以通过在元素上定义 transition 属性来指定过渡效果的持续时间、延迟时间、过渡类型等参数。

以下是一个简单的例子，演示了在鼠标悬停在一个方块上时，方块会逐渐变大的效果：

.square {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
}

.square:hover {
  width: 200px;
}

我们可以看到，当鼠标悬停在方块上时，方块的宽度会在1秒钟内从100px过渡到200px。

在添加的元素上触发 CSS 过渡效果

通常情况下，CSS 过渡效果是在元素的初始状态和最终状态之间进行的。但如果我们想要在添加的元素上触发过渡效果，该怎么办呢？

我们可以通过一个小技巧来实现这个效果。首先，我们创建一个包含过渡效果的类，例如：

.transition-effect {
  transition: width 1s;
}

然后，在使用 JavaScript 或其他方法动态添加元素时，给新添加的元素添加这个类名。例如，使用 JavaScript 添加一个新的方块元素：

function addNewSquare() {
  var square = document.createElement('div');
  square.className = 'square transition-effect';
  document.body.appendChild(square);
}

通过将新添加的元素的类名设置为 transition-effect，我们就可以在这个元素上触发 CSS 过渡效果了。

示例演示

我们可以通过一个示例来演示如何在添加的元素上触发 CSS 过渡效果。在这个示例中，我们将创建一个按钮，点击按钮时会动态添加一个新的方块元素，并在添加元素上触发过渡效果。

首先，我们在 HTML 中添加一个按钮元素：

<button onclick="addNewSquare()">Add Square</button>

然后，在 JavaScript 中定义 addNewSquare 函数，该函数会创建并添加一个新的方块元素：

function addNewSquare() {
  var square = document.createElement('div');
  square.className = 'square transition-effect';
  document.body.appendChild(square);
}

最后，我们需要在 CSS 中定义方块元素的样式和过渡效果：

.square {
  width: 100px;
  height: 100px;
  background-color: red;
}

.transition-effect {
  transition: width 1s;
}

.square:hover {
  width: 200px;
}

当我们点击按钮时，页面上会动态添加一个新的方块元素，并且这个新添加的方块元素会触发 CSS 过渡效果，呈现出逐渐增大的动画效果。