how can I show or hide buttons slowly with a size animation?-CodePudding

I would like to add an animation to the buttons below.

When displaying the buttons: the buttons should slowly increase in size until they are fully displayed.

When hiding: they should slowly get smaller until they are out from the page.

How do i get this this with css?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .btn {
    transition:  1s;
   /*   Continue coding here */
    }
    </style>

</head>
<body>
    <div >
                <button  id="q1" onclick="show()">B1</button>
                <button  id="q2" hidden>B2</button>
                <button  id="q3" hidden>B2</button>

    </div>

</body>
</html>

<script>

  function show() {

    document.getElementById("q1").remove();
    document.getElementById("q2").removeAttribute("hidden");
    document.getElementById("q3").removeAttribute("hidden");

  }

</script>

CodePudding user response：

In order to animate the size, you need to set the beginning and end sizes. I would recommend using a class .hidden instead of the hidden attribute. The class will have a zero size, while the base class .btn has the styles for a non-hidden button. Then you just need to remove the class to trigger the transition.

function show() {

  document.getElementById("q1").remove();
  document.getElementById("q2").classList.remove("hidden");
  document.getElementById("q3").classList.remove("hidden");

}

.btn {
  transition: all 1s;
  width: 4em;
  height: 2.5em;
  padding: 0.5em;
  /* to hide the text when hidden */
  overflow: hidden;
}

.btn.hidden {
  width: 0;
  height: 0;
  padding: 0;
}

<div >
  <button  id="q1" onclick="show()">B1</button>
  <button  id="q2">B2</button>
  <button  id="q3">B3</button>
</div>

CodePudding user response：

Here is a way.

const button = document.querySelector(`.button`);
const showHide = document.querySelector(`.show-hide-button`);

let isHidden = true;

showHide.addEventListener(`click`, () =>{

if(isHidden === true)
{

  setTimeout(()=>{
    button.style.width = `50px`;
  }, 100);

  setTimeout(()=>{
    button.style.display = `none`;
  }, 1000);

}

else
{

  setTimeout(()=>{
    button.style.display = `block`;
  }, 100);

  setTimeout(()=>{
    button.style.width = `150px`;
  }, 150);

}

isHidden = !isHidden;
  
});

.button{
  margin-top: 10px;
  width: 150px;
  display: block;
  transition: 1s;
};

<div>
  <button >ShowHide</button>
  <button >Button</button>
</div>

CodePudding user response：

Use a keyframe animation that is set in a function that is added or removed when the button is clicked.

example: https://jsfiddle.net/93ah2ej5/1/

(clicking one of the B2 buttons hides them and shows the B1 button)

q1 = document.getElementById("q1")
q2 = document.getElementById("q2")
q3 = document.getElementById("q3")

function show() {

        q1.classList.add('hide');
    
    setTimeout(function() {
        document.getElementById("q1").hidden = true;
      document.getElementById("q2").removeAttribute("hidden");
    document.getElementById("q3").removeAttribute("hidden");
    
    q2.classList.remove('hide')
    q3.classList.remove('hide')
    
    q2.classList.add('show')
    q3.classList.add('show')
    }, 3000)

  }
  
function hide() {
        q2.classList.add('hide')
    q3.classList.add('hide')
    
    setTimeout(function() {
    q2.hidden = 'true'
    q3.hidden = 'true'

    q1.hidden = false
    q1.classList.add('show')
    q1.classList.remove('hide')
    }, 3000)
    
    
    
}

@keyframes show {
  0% {
    opacity: 0;
    width: 10px;
    height: 10px
  }
  
  100% {
    opacity: 1;
    width: 32px;
    height: 21.5px;
  }
}

.show {
    animation-name: show;
    animation-duration: 3s;
    }
    
@keyframes hide {
  0% {
    opacity: 1;
    width: 32px;
    height: 21.5px;
  }
  
  100% {
    opacity: 0;
    width: 10px;
    height: 10px
  } 
}

.hide {
    animation-name: hide;
    animation-duration: 3s;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div >
                <button  id="q1" onclick="show()">B1</button>
                <button  id="q2" hidden onclick='hide()'>B2</button>
                <button  id="q3" hidden onclick='hide()'>B2</button>

    </div>

</body>
</html>