如何在JavaScript中使用setInterval方法实现TRANSITION效果?

时间:2017-12-27 13:30:17

标签: javascript html5 css3 dom css-transitions

我已经设置了一个网页,每隔2秒就会改变一次身体的背景颜色。我一直在努力的是如何将过渡效果集成到setInterval方法中。我希望新颜色以淡入淡出效果出现,就像过渡属性在CSS中一样。 如何为这些更改/切换背景颜色实现此效果?

这是我的代码:

var startButton = document.getElementById("startButton");
var body = document.getElementById("body");

// Click Event Listener
startButton.addEventListener("click", function() {
  setInterval(function() {
    body.style.backgroundColor = generateRandomColors();
  }, 2000);
});


// GENERATE Random Colors
function generateRandomColors() {
  var arr = [];
  arr.push(pickRandomColor());
  return arr;
}

// PICK Random Color
function pickRandomColor() {
  // Red
  var r = Math.floor(Math.random() * 256);
  // Green
  var g = Math.floor(Math.random() * 256);
  // Blue
  var b = Math.floor(Math.random() * 256);
  // RGB
  var rgb = "rgb(" + r + ", " + g + ", " + b + ")";
  return rgb;
}
<html>
<body id="body">
  <button id="startButton">Start</button>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

设置transition property,指定要转换的属性以及需要多长时间。

&#13;
&#13;
var startButton = document.getElementById("startButton");
var body = document.getElementById("body");

// Click Event Listener
startButton.addEventListener("click", function() {
  setInterval(function() {
    body.style.backgroundColor = generateRandomColors();
  }, 2000);
});


// GENERATE Random Colors
function generateRandomColors() {
  var arr = [];
  arr.push(pickRandomColor());
  return arr;
}

// PICK Random Color
function pickRandomColor() {
  // Red
  var r = Math.floor(Math.random() * 256);
  // Green
  var g = Math.floor(Math.random() * 256);
  // Blue
  var b = Math.floor(Math.random() * 256);
  // RGB
  var rgb = "rgb(" + r + ", " + g + ", " + b + ")";
  return rgb;
}
&#13;
body { transition: background-color 2s; }
&#13;
<html>
<body id="body">
  <button id="startButton">Start</button>
</body>
</html>
&#13;
&#13;
&#13;