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