单击链接后使用Java的Div动画-怎么做？

Question

I would like to animate a div after clicking on a link. When you click on "About", the should change its height. Height is set to '0em' in the CSS file. It works if I write "document.getElementById('about-div').style.height = '';", but it will jump suddenly, not animated. Now I tried this code but unfortunately, it doesn't want to work:

CSS:

.about-div {position:absolute;top:100vh;left:0em;width:100vw;height:0em;z-index:10000;background:white;overflow:hidden;}

.open {
  -webkit-animation: open 1s ease-in 1 forwards;
  animation: open 1s ease-in 1 forwards;
}

.is-paused {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@keyframes open {
  0%   {height:0em;}
  1%     {height:'';}
  100% {height:'';}
}

@-webkit-keyframes open {
  0%   {height:0em;}
  1%     {height:'';}
  100% {height:'';}
}

@keyframes close {
  0%   {height:'';}
  100% {height:0em;}
}

@-webkit-keyframes close {
  0%   {height:'';}
  100% {height:0em;}
}

HTML:

<a href="javascript:openAbout()">About</a>

<div class="about-div open is-paused">
   <p>Some Content</p>
</div>

...and the Javascript code:

function openAbout()  {
  <script>
    document.querySelector('.about-div').classList.remove('is-paused');
  </script>
}

Any idea about it?

Answer 1

Please see my fiddle .

You should remove the script tags from inside your JS function. All parts of your JS should be inside the script tags like below.

<script>
function openAbout() {
    document.querySelector('.about-div').classList.remove('is-paused');
}
</script>

Also, I think using animation to animate the height is a bit cumbersome, so I used transition instead. Please see demo below (I removed the bottom positioning for easier viewing, you can put it back when you use it).

 function openAbout() { document.querySelector('.about-div').classList.remove('is-paused'); } 

 body { background: #ddd; } .about-div { position:absolute; left:0em; width:100vw; z-index:10000; background:white; overflow:hidden; transition: max-height 5s; } .open { max-height: 999px; } .is-paused { max-height: 0px; } 

 <a href="#" onclick="openAbout()">About</a> <div class="about-div open is-paused"> <p>Some Content</p> </div> 

Answer 2

The function needs to be in script tags, not script tags inside the function.

<script>
function openAbout()  {
    document.querySelector('.about-div').classList.remove('is-paused');
}
</script>

Answer 3

At first:

'href' isn't intended for calling functions. Most HTML elements have an 'onclick' tag for doing that.

<a href="#" onclick="openAbout()">About</a>

And you need to remove the '' tags like mentioned so your code looks like:

function openAbout() {
    document.querySelector('.about div').classList.remove('is-paused');
}