CODEWITHSUNDEEP
javascripthtmlcss
Crystal Kim
Crystal Kim

Reputation: 1

How do I get a smooth transition with Javascript and CSS?

I want a smooth transition for my CSS.

I was confused about the transition.

I used the setTimeout method in JavaScript and my CSS works, but it never looks SMOOTH!

Here is my code.

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>

Upvotes: 0

Views: 100

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

You need to use transition to the .change class. transition will give you the smooth change between two state of element

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>

Upvotes: 1

xianshenglu
xianshenglu

Reputation: 5369

add transition and background-color in css to make it more clear:

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>

Upvotes: 0

Related Questions