CSS过渡效果是一种简单而强大的方式，可以使网站或应用程序更具交互性和动态性。然而，当新元素被添加到DOM中时，传统的过渡方法可能无法起作用。本文将介绍如何使用CSS3过渡实现对新增元素的动画效果。
为什么需要特殊处理新元素？
在DOM中新元素的添加不会触发CSS样式的变化，因此CSS过渡是不会生效的。例如，如果我们有一个div元素：
---- ------------------
并且我们想要为其添加一个过渡效果：
---- - ------ ------ ------- ------ ----------------- ---- ----------- --- --- -
当我们通过JavaScript将新元素添加到DOM中，虽然我们也将其设置为类名“box”，但是它不会继承CSS属性和过渡效果。
--- ------ - ------------------------------ ---------------- - ------ ----------------------------------
为了解决这个问题，我们需要使用一些技巧来确保我们的CSS过渡能够应用到新元素上。
解决方案：使用CSS3过渡和动态类名
为了让过渡生效，我们需要在添加新元素时更改其类名，以便它可以继承CSS属性和过渡效果。这可以通过以下步骤实现：
1. 添加新元素
首先，我们需要使用JavaScript将新的元素添加到DOM中。在本例中，我们将使用一个简单的按钮来触发此操作：
------- ---------------- ------------
--- ------ - ----------------------------------- -------------------------------- ---------- - --- ------ - ------------------------------ ---------------------------------- ---
2. 添加动态类名
添加新元素后，我们需要为其添加一个动态类名。我们可以使用classList API 来添加和删除类名。
-------------------------------
3. 预定义CSS属性
接下来，我们需要预定义CSS属性并将其应用于新元素，以便过渡可以生效。
----------- - ------ ------ ------- ------ ----------------- ---- ----------- --- --- -
请注意，我们在类名“box”后添加了类名“active”，以确保该元素继承了正确的样式。
4. 执行过渡效果
当我们添加了动态类名和预定义的CSS属性后，我们可以使新元素具有过渡效果。我们可以重置元素的外部属性（例如位置，大小等）以触发过渡效果。如下所示：
---------------------- ------------------ - -------- ------------------- - -------- ---------------------------- - ------- -- ---
由于我们在添加新元素后使用了setTimeout()，因此我们可以确保新元素已被添加到DOM中并且过渡效果可以生效。
完整的代码示例：
--------- -----
----- ----------
------
----- ----------------
----------- ---------- -- --- ----------------
-------
----------- -
------ ------
------- ------
----------------- ----
----------- --- ---
-
--------
-------
------
------- ---------------- ------------
--------
--- ------ - -----------------------------------
-------------------------------- ---------- -
--- ------ - ------------------------------
----------------------------
-------------------------------
----------------------------------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------