javascript - 缓和两种颜色的功能

我正在寻找一个简单的div在两种颜色之间无休止地渐变，即蓝色到红色，红色到蓝色，蓝色到红色等。

理想情况下，我将具有这样的函数，它仅需要两种颜色以及在两种颜色之间淡出所花费的时间。

toggle_color = function(color1, color2, time) { ... }

我已经尝试过使用setInterval和setTimeout在它们之间进行翻转，但是这样做并不顺利(即Fade)或处于循环状态。不知道该怎么做。同样不确定使用延迟是正确的选择。似乎仅凭单个时间值始终处于淡入状态可能会更简单，但同样，不确定如何进行。

function toggle_color(color1, color2, cycle_time, wait_time) {

setInterval(function first_color() {
    document.body.style.backgroundColor = color1;
    setTimeout(change_color, wait_time);
}, cycle_time);

function change_color() {
    document.body.style.backgroundColor = color2;
}

最佳答案

我不知道如何不使用CSS过渡就可以做到这一点，但是我相信您仍然可以得到想要的东西。您可以使用JS动态修改背景色动画的过渡时间。

// CSS
body {
   -webkit-transition:background-color 1s ease;
   -moz-transition:background-color 1s ease;
   -o-transition:background-color 1s ease;
   transition:background-color .1s ease;
}

// JS

var id = toggle_color('red', 'blue', 5000);

function toggle_color(color1, color2, time) {
  var $selector = document.querySelector('body');

  setTransitionDurations($selector, time)
  $selector.style.backgroundColor = $selector.style.backgroundColor === color1 ? color2 : color1;
  var intervalId = setInterval(function() {
    $selector.style.backgroundColor = $selector.style.backgroundColor === color1 ? color2 : color1;
  }, time);
  return intervalId;
}

function getStringFromMs(ms) {
  // convert ms to string
  // i.e. 1000 => '1ms'
  return ms + 'ms';
}

function setTransitionDurations($selector, ms) {
  var transitionSeconds = getStringFromMs(ms);
  // you need to set the transition for
  // each browser for max compatibility
  var prefixes = ['-webkit', '-o', '-moz'];
  prefixes.forEach(function(prefix) {
    $selector.style.setProperty(prefix + '-transition-duration', transitionSeconds);
  })
  $selector.style.transitionDuration = transitionSeconds;
}

看看这个jsfiddle来解决:https://jsfiddle.net/dwLL9yy4/8/。注意几件事。如果要动态更改转换，则需要确保为每个浏览器更新转换。请注意，仅IE10及更高版本支持转换。同样，转换期望的时间格式为“1s”或“1000ms”。有关过渡的更多详细信息，请查看https://developer.mozilla.org/en-US/docs/Web/CSS/transition