0
私は最近FreeCodeCampでフロントエンドで遊んでいます。 引用代理店をしているとき、同じ遷移を適用したとしても、私は要素を背景色のトランジションにすることができましたが、ボディにはできませんでした。ボディーの背景色が他のdivと変わらない
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;
});
});
ペンと同じように、最初に正しく移行しているコンテナ流体とジャンボトロンが表示されます。下に表示するようにウィンドウをドラッグして、ボディの背景が遷移しないようにしてください。
任意の助けが理解されるであろう、私はフロントエンドの開発に新しいですし、私はまだ完全にはそれの内部ロジックを理解していません。
体とを持っている必要があり、終了状態クラス 'color-front'は' background-color'を持たず、デフォルトの背景色を適用することで違いが生まれます。 –
体はまだ変わらず、背景色は現在の色ではなく前の色に更新されます。 divが色n-1から色nに遷移しているとき、ボディはカラーn-1に更新されます。 – Jacquot
あなたの体からどのような遷移が予想されますか？そのフェーディング・トランジションが機能しています。 –