How to display block with animation?-CodePudding

I want to make block appear with animation from top to normal position. I thought it's possible to do with after selector.

So, I want to click on some element and show another element with animation.

Here is the code for now.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title{
            padding: 20px 20px;
            background-color: aqua;
            width: 50px;
            height: 200px;
        }

        .added-content{
            display: none;
            background-color: black;
            width: 50px;
            height: 200px;
        }

        .added-content--active{
            display: block;
        }

    </style>
</head>
<body>
    <div >
        some title
    </div>

    <div >
        addon
    </div>

    <script>
        const title=document.querySelector('.title');
        const contenAdded=document.querySelector('.added-content');

        title.addEventListener('click',()=>{
            contenAdded.classList.toggle('added-content--active');
        })

    </script>
</body>
</html>

Here is the link to code Sandbox: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html

Is there any way to show the block with animation, so it would look beautiful? Thank you in advance.

CodePudding user response：

You can use opacity and visibility instead of display

.added-content {
  background-color: black;
  width: 50px;
  height: 200px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
}

.added-content--active {
  visibility: visible;
  opacity: 1;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        padding: 20px 20px;
        background-color: aqua;
        width: 50px;
        height: 200px;
      }

      .added-content {
        background-color: black;
        width: 50px;
        height: 200px;
        visibility: hidden;
        opacity: 0;
        transition: all 0.5s;
      }

      .added-content--active {
        visibility: visible;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div >
      some title
    </div>

    <div >
      addon
    </div>

    <script>
      const title = document.querySelector(".title");
      const contenAdded = document.querySelector(".added-content");

      title.addEventListener("click", () => {
        contenAdded.classList.toggle("added-content--active");
      });
    </script>
  </body>
</html>

CodePudding user response：

With keyframes:

const title = document.querySelector(".title");
const contenAdded = document.querySelector(".added-content");

title.addEventListener("click", () => {
  contenAdded.classList.toggle("added-content--active");
});

.title {
  padding: 20px 20px;
  background-color: aqua;
  width: 50px;
  height: 200px;
  position: relative;
  z-index: 2;
}

.added-content {
  display: none;
  background-color: black;
  width: 50px;
  height: 200px;  
  position: relative;
  top: 0;
}

.added-content--active {
  display: block;
  animation: slideup 0.5s;
}

@keyframes slideup {
  from {
    top: -100px;
  }

  to {
    top: 0;
  }
}

<div >some title</div>
<div >addon</div>