如何使用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>