How can I show a heading element on button click?-CodePudding

I am using keyframes but my h1 is not visible on button click. What am I doing wrong?

Here is my code:

function abc() {
  document.querySelector('.h1cls').classList.add('fadeIn')
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 150ms;
  animation-timing-function: linear;
  animation-delay: 5000ms;
  /*opacity:1;*/
}

.one .two .h1cls {
  opacity: 0;
}

<div class="one">
  <div class="two">

    <h1 class="h1cls">hello</h1>
    <div></div>

    <button onclick="abc()">asd</button>

https://codesandbox.io/s/serene-lamport-12kgz?file=/index.html:0-994

actually I am using opacity . I am setting opacity to 1 after button click.

CodePudding user response：

In your abc() function, you should also remove h1cls class due to the fact that it still applies opacity: 0 style.

 function abc(){
    document.querySelector('.h1cls').classList.add('fadeIn')
    document.querySelector('.h1cls').classList.remove('h1cls')
 }

CodePudding user response：

It is animating but then disappearing immediately. You need to tell the system to keep the final state of the animation. You do this with animation-fill-mode: forwards

Note that the animation will only run on the first click of the button.

CodePudding user response：

You've missed animation-fill-mode property in fadeIn CSS class.

Correct code:

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 150ms;
  animation-timing-function: linear;
  animation-delay: 5000ms;
  animation-fill-mode: forwards;
}

Refference: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

CodePudding user response：

Try with animation-fill-mode: both animation applies styles to its target before and after its execution.

.fadeIn {
            animation: 150ms linear 5000ms both fadeIn;
        }

CodePudding user response：

You have to add animation-fill-mode:forwards; property too in the fadeClass in order to make this work

function abc() {
  document.querySelector('.h1cls').classList.add('fadeIn')
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 150ms;
  animation-timing-function: linear;
  /*animation-delay: 5000ms;*/
  animation-fill-mode:forwards; // add this line
  /*opacity:1;*/
}

.one .two .h1cls {
  opacity: 0;
}

<div class="one">
  <div class="two">

    <h1 class="h1cls">hello</h1>
    <div></div>

    <button onclick="abc()">asd</button>

CodePudding user response：

you can used the toggle class and transition

function abc() {
  document.querySelector('.h1cls').classList.toggle('fadeIn')
}

.one .two .h1cls {
transition: opacity 150ms linear;
  opacity: 0;
}

.one .two .h1cls.fadeIn {

  opacity:1;
}

<div class="one">
  <div class="two">

    <h1 class="h1cls">hello</h1>
    <div></div>

    <button onclick="abc()">asd</button>
    
    </div>
    </div>

or with animation

function abc() {
  document.querySelector('.h1cls').classList.toggle('fadeIn')
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



.one .two .h1cls {
  opacity: 0;
}

.one .two .h1cls.fadeIn {
  animation-name: fadeIn;
  animation-duration: 150ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

<div class="one">
  <div class="two">

    <h1 class="h1cls">hello</h1>
    <div></div>

    <button onclick="abc()">asd</button>
    
    </div>
    </div>

CodePudding user response：

When we click on button it just adding class fadeIn and this class will animate from opacity 0 to opacity 1. But after animation completed it will again hide, so add opacity:1!important in .fadeIn class property.

In simple way just add opacity:1!important in fadeIn css property.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
    <style>
       @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
      .fadeIn {
            animation-name: fadeIn;
            animation-duration: 150ms;
            animation-timing-function: linear;
            animation-delay: 5000ms;
            opacity:1 !important;
        }

        .one .two .h1cls {
          opacity: 0;
        }
      </style>
  </head>
  <body>

    <div class="one">
        <div class="two">
        <h1 class="h1cls">hello</h1>
      <div>
    </div>
    <button onclick="abc()">asd</button>
    <script>
    function abc(){
      document.querySelector('.h1cls').classList.add('fadeIn')
    }
    </script>
</body>
</html>