如何使用Javascript和CSS順利過渡？

Question

我想要CSS的平穩過渡。

我對過渡感到困惑。

我在JavaScript中使用了setTimeout方法，並且CSS可以正常工作，但是看起來從來沒有平滑！

這是我的代碼。

 function slideChange(){ console.log("__start"); var myVar = setTimeout(change, 1000); } function change(){ var el = document.getElementById('paper slide'); console.log(el.className); el.className = 'paper change'; console.log(el.className); console.log("__finish"); } function slide(){ var slide = document.getElementById("paper slide"); slide.onclick = function(){ console.log("onclick event start"); }; } slideChange(); slide(); 

 .first { width: 100%; max-width: 600px; max-height: 100px; position: relative; margin: 0 auto; overflow: hidden; opacity: 0.5; } .change { width: 100%; max-width: 600px; max-height: 100%; overflow: hidden; position: relative; margin: 5% auto; opacity: 1; } 

 <div class="paper container" id="paper slide"> <div class="login-form"> <input type="text" placeholder="input your email" id="paperInputs1"> </div> <div class="login-form"> <input type="text" placeholder="input your password" id="paperInputs2"> </div> </div> 

Answer 1

您需要使用transition到.change類。 transition將為您提供元素的兩種狀態之間的平滑變化

堆棧片段

 function slideChange() { console.log("__start"); var myVar = setTimeout(change, 1000); } function change() { var el = document.getElementById('paper slide'); console.log(el.className); el.className = 'paper change'; console.log(el.className); console.log("__finish"); } function slide() { var slide = document.getElementById("paper slide"); slide.onclick = function() { console.log("onclick event start"); }; } slideChange(); slide(); 

 .first { width: 100%; max-width: 600px; max-height: 100px; position: relative; margin: 0 auto; overflow: hidden; opacity: 0.5; } .change { width: 100%; max-width: 600px; max-height: 100%; overflow: hidden; position: relative; margin: 5% 0; opacity: 1; transition: all 1s ease; } 

 <div class="paper container" id="paper slide"> <div class="login-form"> <input type="text" placeholder="input your email" id="paperInputs1"> </div> <div class="login-form"> <input type="text" placeholder="input your password" id="paperInputs2"> </div> </div> 

Answer 2

在css添加transition和background-color使其更加清晰：

 function slideChange(){ console.log("__start"); var myVar = setTimeout(change, 1000); } function change(){ var el = document.getElementById('paper slide'); console.log(el.className); el.className = 'paper change'; console.log(el.className); console.log("__finish"); } function slide(){ var slide = document.getElementById("paper slide"); slide.onclick = function(){ console.log("onclick event start"); }; } slideChange(); slide(); 

 .first { width: 100%; max-width: 600px; max-height: 100px; position: relative; margin: 0 auto; overflow: hidden; opacity: 0.5; } .change { width: 100%; max-width: 600px; max-height: 100%; overflow: hidden; position: relative; margin: 5% auto; opacity: 1; transition:all 2s ease; background-color:pink; } 

 <div class="paper container" id="paper slide"> <div class="login-form"> <input type="text" placeholder="input your email" id="paperInputs1"> </div> <div class="login-form"> <input type="text" placeholder="input your password" id="paperInputs2"> </div> </div>