Question

我有以下代码可以在按下按钮时转换元素的不透明度：

let el = document.createElement('div')
el.className = 'thumbnail'
document.body.appendChild(el)

let show_btn = document.getElementById('show_btn')
show_btn.addEventListener('click', show_el)

function show_el() {
    el.style.opacity = 1
}

 .thumbnail {
  width: 80px;
  height: 80px;
  background: black;
  opacity: 0;
  transition: opacity 2s;
}

<!DOCTYPE HTML>
    <html>
        <body>
            <button id="show_btn">Show el</button>
        </body>
    </html>

为什么删除事件侦听器并将show_el()调用直接放在创建元素的部分下后，过渡将无法正常工作？：

let el = document.createElement('div')
el.className = 'thumbnail'
document.body.appendChild(el)
show_el()

function show_el() {
  el.style.opacity = 1
}

.thumbnail {
    width: 80px;
    height: 80px;
    background: black;
    opacity: 0;
    transition: opacity 2s;
}

我也可以在这样的设置下工作吗？

通过事件侦听器与直接函数调用启动时的过渡行为不同

0 个答案: