Question

我最近在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中，我们首先看到正确转换的容器流体和jumbotrons，你必须向上拖动窗口才能看到，身体背景没有过渡。

start of the transition

middle of the transition

transition ended

任何帮助都会受到赞赏，我是前端开发的新手，我仍然不完全理解它的内在逻辑。

Answer 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>

身体背景颜色不像其他div那样过渡

1 个答案: