用动画显示/隐藏元素答案

【问题标题】：Show / Hide elements with animation用动画显示/隐藏元素
【发布时间】：2019-04-11 23:33:32
【问题描述】：

我正在创建一个网站，我正在尝试制作一个按钮来切换 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>

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

【问题讨论】：

fadeIn() 和 fadeOut() 是 jQuery 函数。你在用 jQuery 吗？
给定的javascript代码不清楚。你能说明你在哪里使用过fadeIn()和fadeOut()吗？
问题没有用 css 标记，但是 css 有很好的工具可以非常有效地做到这一点。这可能是您的一个选择。 w3schools.com/css/css3_transitions.asp
我现在没有使用 jQuery

标签： javascript html css

【解决方案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>

【讨论】：

【解决方案2】：

我建议使用动画友好的 opacity 属性切换隐藏/显示，而不是按以下方式显示：

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;
}

这是一个示例代码笔： https://codepen.io/mikeCky/pen/WWjLEq

【讨论】：

【解决方案3】：

简单地使用切换类代替显示块。然后通过将 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;
}

【讨论】：

【解决方案4】：

fadeIn() 和 fadeOut() 是 JQuery 函数。从您发布的代码中，您没有使用 JQuery。你有一些基本的选择来做你想做的事：

JQuery Effects - 这将使用fadeIn() 和fadeOut()，但您必须使用JQuery；
CSS Animations - 你可以在 CSS 中使用 @Keyframes 做你想做的事；
CSS Transitions - 最适合您的情况。您可以使用“transition”属性来更改元素的不透明度，指定动画的持续时间以及是否希望它重复动画。

【讨论】：

这不能回答 OP 的问题。问题不需要 JQuery