时间戳

首页 > 解决方案 > 淡入 css 延迟

javascript - 淡入 css 延迟

问题描述

你好，所以我试图淡入容器，这些容器被用烧瓶 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);
        }
    });

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

标签： javascripthtmljquerycsscss-transitions

解决方案

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

推荐阅读