如何使用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将为您提供两个元素状态之间的平滑变化

Stack Snippet

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

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

＆＃13;

＆＃13;

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();

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;