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

请参阅my fiddle。

您应该从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');
}

单击链接后使用Javascript划分动画 - 如何？

3 个答案: