我的需求很简单,但我找不到合适的解决方案。
我创建元素并将它们作为项列表添加到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>
带硬编码最大高度的(看起来不错):
未设置最大高度的(看起来很笨拙):
发布于 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>
https://stackoverflow.com/questions/50776874
复制相似问题