Question

我希望在两种颜色之间有一个简单的div渐渐消失，即蓝色到红色，红色到蓝色，蓝色到红色等等。

理想情况下，我有一个这样的功能，它只需要两种颜色和它们之间的淡入淡出所需的时间。

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

我已经尝试过使用setInterval和setTimeout在它们之间翻转，但它并没有顺利（即淡化）或循环。不知道该怎么做。也不确定使用延迟是正确的道路。似乎只是在单个时间值之间不断处于淡入淡出的状态可能更简单，但同样不确定如何。

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;
}

Answer 1

我不知道如何在不使用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

Answer 2

只有几行CSS：

body{
  animation: bodybg 2s 0s linear infinite alternate;
}

@keyframes bodybg{
  from   {background:red;}
  to     {background:blue;}
}

两种颜色之间的功能

2 个答案: