單擊鏈接后使用Java的Div動畫-怎么做？

Question

單擊鏈接后，我想為div設置動畫。 當您點擊“關於”時，應當更改其高度。 CSS文件中的高度設置為“ 0em”。 如果我編寫“ document.getElementById（'about-div'）。style.height =”;”，它將起作用，但是它會突然跳動，而不是動畫。 現在，我嘗試了這段代碼，但不幸的是，它不想工作：

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>

...以及Javascript代碼：

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

有什么想法嗎？

Answer 1

請看我的小提琴 。

您應該從JS函數內部刪除script標簽。 JS的所有部分都應位於以下腳本標記內。

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

另外，我認為使用動畫為高度設置動畫有點麻煩，因此我改用了過渡。 請參閱下面的演示（為了方便查看，我刪除了底部位置，可以在使用時放回去）。

 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

該功能必須位於腳本標簽中，而不是功能內部的腳本標簽中。

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

Answer 3

首先：

“ href”不適用於調用函數。 大多數HTML元素都具有一個“ onclick”標記。

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

而且您需要刪除如前所述的''標簽，因此您的代碼應如下所示：

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