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使您可以定义元素的两种状态之间的过渡...

这是一个例子

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>

Answer 2

我建议使用动画友好型不透明度道具来切换隐藏/显示，而不是按照以下方式显示：

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

Answer 3

fadeIn（）和fadeOut（）是JQuery函数。根据您发布的代码，您没有使用JQuery。您可以通过一些基本选项来做自己想做的事情：

JQuery Effects-这将使用fadeIn（）和fadeOut（），但您必须使用JQuery;
CSS Animations-您可以在CSS中使用@Keyframes进行所需的操作；
CSS Transitions-最适合您的情况。您可以使用“过渡”属性来更改元素的不透明度，指定动画的持续时间以及是否希望重复动画。

Answer 4

简单使用切换类代替显示块。然后按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 个答案: