Question

在这里，我尝试使用其ID选择图片，并在5秒钟后更改图片，但是过渡延迟无法正常工作，如果我做错了什么，请让我知道，因为我觉得这是一个重要的问题，没人要打扰

var b1=document.querySelector("#bubbles");
   b1.src="https://steemitimages.com/DQmaC34qT4WKoUd9A1X91XjGVRbCYEJZooCJxwshpvjvpnU/3676223822_713fe300a6_b.jpg";
   
    b1.style.transitionDelay="5s";
    
    b1.src="http://earthwidetribe.com/wp-content/uploads/2014/10/popping-bubble.jpg";
    
     b1.style.transitionDelay="5s";
     
   b1.src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-wGqzB-SJZnFzXoKnSRjRK5IDLgYY43GpLG1FXj5uvgivbMtT";

<img id="bubbles"/>

Answer 1

您无法使用CSS为src设置动画
您可以淡出并更改src，然后淡入

Answer 2

transitionDelay将仅延迟元素的显示。您的代码将立即全部运行，因此最后的transitionDelay和src将应用于该元素。

执行此操作：

var b1 = document.querySelector("#bubbles");
b1.src = "https://steemitimages.com/DQmaC34qT4WKoUd9A1X91XjGVRbCYEJZooCJxwshpvjvpnU/3676223822_713fe300a6_b.jpg";

setTimeout(function() {
  b1.src = "http://earthwidetribe.com/wp-content/uploads/2014/10/popping-bubble.jpg";

  setTimeout(function() {
    b1.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-wGqzB-SJZnFzXoKnSRjRK5IDLgYY43GpLG1FXj5uvgivbMtT";
  }, 5000);
}, 5000);

<img id="bubbles" />

如何在JavaScript中应用CSS过渡延迟属性在特定时间后更改图像

2 个答案: