我正在努力使用 vanilla JavaScript 创建淡入淡出效果。添加 className 属性适用于使用 document.createElement 方法创建的元素，但似乎不适用于使用 var elem = "<li> List Item </li>"方法。我在 html 中有 ul 和 id 列表，我正在使用 html 字符串方法创建一个列表项。我正在使用 list.innerHTML = elem 将列表项附加到列表，然后尝试在列表项上添加一个类“淡入”。我已经使用 setTimeout 函数来延迟动画，但它仍然不起作用。请引用下面的代码。
var list = document.getElementById("list");
var li = "<li> This is a list item</li>";
list.innerHTML = li;
li.className = "fade-in";
// setTimeout(function(){
// li.className = "fade-in";
// },5);#list {
opacity: 0;
}
.fade-in {
opacity: 1;
transition: opacity 0.5s;
}
li {
list-style-type: none;
font-size: 18px;
background-color: #84ac47;
color: #fff;
padding: 10px 5px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul id="list"></ul>
</body>
</html>最佳答案
使用css动画
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in{
animation: fadeIn .25s forwards;
}
并更改您的 li字符串为 <li class="fade-in">...</li> .这样，当您使用 innerHTML 时，该类将位于元素上，并且动画将处理不透明度变化。
更新说明:
所以你要添加 li使用 innerHTML 将元素添加到 DOM。当该元素被添加到 DOM 时，它具有类 fade-in .
我们使用 @keyframes rule 创建一个 css 动画我们任意命名我们的动画fadeIn . @keyframes内规则我们指定我们希望动画在应用于元素时执行的操作。我们说我们想从 opacity: 0 开始然后转到 opacity: 1 .
我们通过指定 animation 来使用动画.fade-in 上的属性(property)类(class)。我们称我们的动画为fadeIn所以通过在 .fade-in 上设置动画属性类我们说我们想要所有元素 .fade-in完成 fadeIn动画 .25s并设置 animation-fill-mode属性(property)forwards这意味着它会在动画完成后保留最终的动画样式。
关于javascript - 在纯 JavaScript 中为使用 HTML 字符串方法创建的元素添加 CSS3 动画(无库)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44360692/