淡入 css 延迟答案

【问题标题】：Fade-In css latency淡入 css 延迟
【发布时间】：2021-04-11 18:36:16
【问题描述】：

你好，所以我试图淡入容器，这些容器被烧瓶获取的数据所取代 HTML + CSS 代码

<img class="imgContainer" onload="this.style.opacity=1" src="{{ url_for('static', filename='players/_' ~ player1.username ~ '_.png') }}"/>

.imgContainer {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;

}

这就是我“淡入我的容器”的方式这就是我将其淡出的方式：

$.ajax({
        url : "/vote",
        type : "POST",
        data : { "winner" : "1", "player1" : player1, "player2" : player2 },
        cache : false,
        success : function(data) {
            $("#container").fadeOut()
            setTimeout(function(){
                $("#container").replaceWith(data);
            }, 1000);
        }
    });

我目前的问题是它不会同时在两个容器中淡入淡出，并且它们之间存在延迟。解决这个问题并让它们同时出现的最佳方法是什么？

【问题讨论】：

您的示例代码未引用您提供的 html。首先，jQuery的fadeOut不需要在css中设置transition。您可以编辑速度和缓动作为额外参数。第二。如果您正在执行多个异步调用。他们将在不同的时间触发成功回调。

标签： javascript html jquery css css-transitions

【解决方案1】：

加载元素后执行的 Onload 事件。也许您的图像不会同时加载，这就是您的淡入淡出不匹配的原因。如果可能的话，我会尝试将图像包装到一个 div 中并在其上设置 onload，或者使用@keyframes 而不是 onload（我不确定）。

【讨论】：