如何仅使用CSS3顺利地将动态创建的元素添加到DOM中？
如何仅使用CSS3顺利地将动态创建的元素添加到DOM中？
提问于 2018-06-10 01:32:33
我的需求很简单，但我找不到合适的解决方案。
我创建元素并将它们作为项列表添加到DOM中，每个新元素都添加在旧元素之前。我希望新的元素被“顺利”添加。每个元素的height都是动态的，CSS规则也是如此。
我想我必须使用CSS、animations和keyframes，从我读到的内容来看，我不能使用transitions，因为有时候it is not rendered by the browser。我不想使用Javascript，所以我更喜欢避免使用setTimeout()或jQuery解决方案。我确信这可以使用现代CSS正确地完成，但我仍然必须找到正确的方法。
我有一个解决方案的开始(见下文)，，但在CSS中仍然有max-height: 1000px硬编码，我想避免这种情况，但我不知道如何避免，因为用auto或unset替换它会破坏动画(参见文章末尾的GIF)。
如何实现像这样向DOM添加新元素的优雅转换(不一定使用我提供的代码)？
function addElement() {
let dynamicHeight = Math.ceil(Math.random() * 30) + 100;
let newElem = `<div class='elem' style='height: ${dynamicHeight}px'></div>`;
let elements = document.getElementById("elements");
elements.insertAdjacentHTML("afterbegin", newElem);
}
let button = document.getElementById("button")
button.addEventListener("click", addElement); .elem {
background-color: blue;
margin: 5px;
animation-duration:0.5s;
animation-name: slidein;
}
@keyframes slidein {
from {
max-height: 0px;
transform: scale(0);
opacity: 0;
}
to {
max-height: 1000px;
transform: scale(1);
opacity: 1;
}
} <button id="button">Add element</button>
<div id="elements"></div>
带硬编码最大高度的(看起来不错)：
未设置最大高度的(看起来很笨拙)：
回答 1
Stack Overflow用户
发布于 2018-06-10 05:35:21
由于您定义的是固定高度，因此解决方案是将高度设置为从0px到固定值。这里的技巧是依赖于CSS变量，以便能够根据元素的高度对元素进行动态动画：
function addElement() {
let dynamicHeight = Math.ceil(Math.random() * 100) + 40;
let newElem = `<div class='elem' style='--h: ${dynamicHeight}px'></div>`;
let elements = document.getElementById("elements");
elements.insertAdjacentHTML("afterbegin", newElem);
}
let button = document.getElementById("button")
button.addEventListener("click", addElement);.elem {
background-color: blue;
margin: 5px;
animation: slidein 0.5s forwards;
}
@keyframes slidein {
from {
height: 0px;
transform: scale(0);
opacity: 0;
}
to {
height:var(--h); /*This will change for each element */
transform: scale(1);
opacity: 1;
}
}<button id="button">Add element</button>
<div id="elements"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50776874
复制相关文章
相似问题