我正在努力解决一个问题，即不能对动态创建的元素应用有效的转换。 这是一个简单的例子，演示了这个问题:
null
var div = document.createElement('div');
div.style = 'width: 200px; height: 200px; background-color: green; opacity: 0; transition: opacity 1s linear;';
document.body.append(div);
div.style.opacity = 1;null
方框显示二进制。 如果我更改为元素检查器并更改不透明度值1<=>； 0，则转换已应用。 我必须使用样式表吗？还是有不同问题？ 如果我不打算只为这个转换创建特殊的样式表，那么我如何正确地通知浏览器属性已经更改了呢？
您正在设置页面负载的不透明度，因此它从技术上永远不会改变，并且没有任何需要转换的内容。 您需要在下一个事件循环中应用更改，您可以使用SetTimeout（。。。，0)（或使用RequestAnimationFrame):
null
let green = document.createElement('div'),
red = document.createElement('div');
green.style = 'width: 200px; height: 200px; background-color: green; opacity: 0; transition: opacity 1s linear;',
red.style = 'width: 200px; height: 200px; background-color: red; opacity: 0; transition: opacity 1s linear;';
document.body.appendChild(green),
document.body.appendChild(red);
// the box's opacity is set to 0 when this script runs,
// but when the callback below is executed, it will be
// set to 1, triggering the actual transition
setTimeout(() => red.style.opacity = 1, 0);
// requestAnimationFrame will do effectively the same
// thing, but will try to wait until a frame is rendered.
// setTimeout(..., 0) will execute on the next event loop
// regardless of frame rate
requestAnimationFrame(() => green.style.opacity = 1, 0);body {
display: flex;
flex-direction: row;
}