javascript - 使用动画显示/隐藏元素

Question

我正在创建一个网站，我正在尝试制作一个按钮来切换 div 元素的可见性。它现在对我有用，但我想给它添加一个动画，但我就是做不到。

我尝试将 "block" 更改为 fadeIn() 并将 "none" 更改为 fadeOut() 但那没有用。

有什么想法吗？

function pcsh1() {
  var x = document.getElementById("pc1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<button onclick="pcsh1()">Show / Hide PC 1</button>
<div id="pc1">
  <textarea rows="2" cols="20" placeholder="PC Name" class="pcbox">PC Name: </textarea>
  <textarea rows="2" cols="20" placeholder="Alignment" class="pcbox">Alignment: </textarea>
  <textarea rows="2" cols="20" placeholder="Max HP" class="pcbox">Max HP: </textarea>
  <textarea rows="2" cols="20" placeholder="Current HP" class="pcbox">Current HP: </textarea>
</div>

目前的输出很好，但我更希望它有一个动画。

Answer 1

您可以使用 CSS transition 规则，并使用 JavaScript 在目标元素上简单地切换 CSS 类。 transition 可让您更改元素上的一个或多个 CSS 规则。

transition

Transitions enable you to define the transition between two states of an element...

举个例子

var btn = document.getElementsByTagName('button')[0]
var p = document.getElementsByTagName('p')[0]

btn.addEventListener('click', evt => {
  p.classList.toggle('show')
})

.show {
  opacity: 1;
}

p {
  opacity: 0;
  transition: opacity 0.6s linear;
}

<button>Click Me</button>

<p>Hello</p>

根据您的示例，您可以这样做:

var btn = document.getElementsByTagName('button')[0];
var pc1 = document.getElementById('pc1');

btn.addEventListener('click', function() {
  pc1.classList.toggle('hide');
});

#pc1 {
  opacity: 1;
  transition: opacity 0.5s linear;
}

#pc1.hide {
  opacity: 0;
}

<button>Show / Hide PC 1</button>
<div id="pc1">
  <textarea rows="2" cols="20" placeholder="PC Name" class="pcbox">PC Name: </textarea>
  <textarea rows="2" cols="20" placeholder="Alignment" class="pcbox">Alignment: </textarea>
  <textarea rows="2" cols="20" placeholder="Max HP" class="pcbox">Max HP: </textarea>
  <textarea rows="2" cols="20" placeholder="Current HP" class="pcbox">Current HP: </textarea>
</div>