尝试通过 JavaScript 执行 CSS 转换是行不通的

Answer 1

如果您使用 JS 使元素可见并添加类来触发转换，则它将不起作用，因为 JS 同时执行这两个操作。如果元素上的属性发生更改，则会触发转换，但像这样完成，

top

属性永远不会更改，当元素变得可见时它已经存在了。

您可以在两者之间添加 JS 操作来触发浏览器“重排”。这样，浏览器首先使元素可见，在页面上绘制该元素，然后添加类以触发转换。

searchBar.style.display = "flex";
searchBar.offsetWidth;
searchBar.classList.add("search-bar-open")