正文背景颜色不转换为其他 div答案

【问题标题】：Body background color not transitioning as other divs正文背景颜色不转换为其他 div
【发布时间】：2016-06-24 23:00:06
【问题描述】：

我最近在 FreeCodeCamp 玩前端。在做报价分配器时，我设法使元素背景颜色过渡，但不是主体，即使我应用了相同的过渡。

Codepen 的笔在这里：https://codepen.io/louis__/full/dXpwLx/

html：

<body class="color-front">
  <div class="container-fluid color-back">
    <div class="jumbotron"></div>
    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-6">
        <div id="main" class="container-fluid">
          <div class="quote color-front"><a class="fa fa-quote-left color-front"></a> <span id="quote">Ceci est ma citation de départ, elle est peut-être toujours un peu courte !</span> <a class="fa fa-quote-right color-front"></a></div>
          <p class="text-right quote color-front">- <b><span id="author">Me</span></b></p>
          <div class="row">
            <div class="col-md-3 text-left">
              <a href="#" class="fa fa-twitter low social color-back"></a>
            </div>
            <div class="col-md-5"></div>
            <div class="col-md-4">
              <button id="newquote" class="low change text-center color-back">New Quote</button>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3"></div>
    </div>
  </div>
  <div id="footer" class="container-fluid color-back">
    <div class="jumbotron"></div>
  </div>
</body>

感兴趣的部分来自 - CSS：

.color-back {
  background-color: blue;
  -webkit-transition: background-color 1000ms linear;
  -moz-transition: background-color 1000ms linear;
  -o-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}
.color-front {
  -webkit-transition: color 1000ms linear;
  -moz-transition: color 1000ms linear;
  -o-transition: color 1000ms linear;
  -ms-transition: color 1000ms linear;
  transition: color 1000ms linear;
  color: blue;
  font-color: blue !important;
}

body {
  transition: background-color 1000ms linear;
  -webkit-transition: background-color 1000ms linear;
  -moz-transition: background-color 1000ms linear;
  -o-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
}

和 JQuery ：

var i = 0;
$(document).ready(function() 
{
  $("#newquote").on("click", function() 
  {
    $("body").css("background-color", quotes[i].color);
    $("#quote").html(quotes[i].quote);
    $("#author").html(quotes[i].author);
    $(".color-back").css("background-color", quotes[i].color);
    $(".color-front").css("color", quotes[i].color);
    i = (i + 1)%quotes.length;
  });
});

在 Pen 中，我们首先看到容器流体和 jumbotron 正确过渡，您必须向上拖动窗口才能看到下方，主体背景没有过渡。

任何帮助将不胜感激，我是前端开发的新手，但我仍然不完全理解它的内部逻辑。

【问题讨论】：

body 类 color-front 没有 background-color，应用默认背景颜色会有所不同。
确实如此，但奇怪的是，body 仍然没有过渡，然后将其背景颜色更新为以前的颜色，而不是当前颜色。即当 div 从颜色 n-1 过渡到颜色 n 时，主体更新为颜色 n-1...
您希望自己的身体发生什么样的转变？现在它的衰落过渡工作。
正在转换的是容器流体和超大屏幕。如果向上拖动窗口，您可以看到正文背景没有过渡。

标签： jquery html css transition

【解决方案1】：

在一个简单的 CSS transition 中，您创建了一个包含 2 个状态的规则集（如果您使用 keyframes，则更多）。您开始的状态应该有转场、变换、动画等。结束状态应该至少有预期的样式（例如从opacity: 0 到opacity: 1）

html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
/* First State */

body {
  background: rgba(128, 64, 128, .8);
  transition: all 1s linear;
  height: 100%;
  width: 100%;
}
/* First State */

.anim:before {
  position: relative;
  content: 'transition';
  color: rgba(255, 255, 0 .2);
  background: rgba(24, 64, 16, .2);
  opacity: .6;
  left: 50%;
  font-size: 16px;
  transition: all 1s;
}
/* Last State */

.anim:hover:before {
  content: 'transition';
  color: rgba(255, 27, 128, 1);
  left: 0;
  background: rgba(128, 64, 0, 1);
  opacity: 1;
  transition: all 1s;
  font-size: 32px;
}
/* Last State */

.anim:hover {
  background: rgba(0, 128, 256, .4);
}
.static {
  height: 50px;
  width: 50px;
  margin: 0 auto;
  background: #fc2;
}

<!doctype html>
<html>
<meta charset="utf-8">

<head>
</head>

<body class="anim">
  <div class="static">Hover
    <br/>Here</div>
</body>

</html>

【讨论】：