显示/隐藏带动画效果的元素

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>

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

- Yaron Silbershatz

---

fadeIn()和fadeOut()是jQuery函数。您正在使用jQuery吗？ - j08691

给出的 JavaScript 代码不够清晰。你能展示一下你在哪里使用了 fadeIn() 和 fadeOut() 吗？ - 3rdsty4bl00d

问题没有标记为 CSS，但是 CSS 有很多工具可以以非常高效的方式完成这个任务。这可能是一个适合您的选择。https://www.w3schools.com/css/css3_transitions.asp - Mark Baijens

我现在没有使用jQuery。 - Yaron Silbershatz

Answer 1

您可以使用CSS的transition规则，然后再使用JavaScript在目标元素上切换CSS类。这样一来，transition就可以让您更改一个或多个元素的CSS规则。

transition

过渡效果使您可以定义元素从一种状态到另一种状态的过渡方式...

这里是一个例子

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>

- DavidDomain

Answer 2

我建议在以下方式中使用可动画化的透明度属性切换隐藏/显示，而不是使用display属性：

function pcsh1() {
    var x = document.getElementById("pc1");
    if (x.classList.contains("hide")) {
      x.classList.remove("hide");
    } else {
      x.classList.add("hide");
    }
}

并添加一个 CSS 过渡效果：

#pc1 {
  opacity: 1;
  transition: opacity 1s;
}
#pc1.hide {
  opacity: 0;
}

这里有一个 CodePen 的示例： https://codepen.io/mikeCky/pen/WWjLEq

- Mike Chatsky

---

非常好的建议，代码量很少。谢谢！ - Christine Treacy

Answer 3

简单使用toggle class替代display block。然后通过在y轴上缩放元素为0来隐藏它。下面是您的代码：

function pcsh1() {
  var x = document.getElementById("pc1");
  x.classlist.toggle('is-show');
 }

并且你的css：

#pc1 {
    transform: scaleY(0);
    transition: transform 400ms ease 0ms;
}

#pc1.is-show {
    transform: scaleY(1);
    transition: transform 400ms ease 0ms;
}

- Rafv

Answer 4

fadeIn()和fadeOut()是JQuery函数。从您发布的代码来看，您没有使用JQuery。您有一些基本选项可以实现您想要的效果：

• JQuery Effects - 这将使用fadeIn()和fadeOut()，但您必须使用JQuery；
• CSS Animations - 您可以使用CSS中的@Keyframes实现您想要的效果；
• CSS Transitions - 对于您的情况最推荐的方法。您可以使用“transition”属性来更改元素的不透明度，指定动画的持续时间以及是否要重复动画。

- GDias

---

这不回答问题。问题并没有要求使用JQuery。 - Daniel L. VanDenBosch