单击两个不同的按钮时如何在同一文本上应用不同的动画答案

【问题标题】：How to apply different animation on the same text when two different buttons are clicked单击两个不同的按钮时如何在同一文本上应用不同的动画
【发布时间】：2022-02-10 05:11:56
【问题描述】：

我有一个按钮，点击时会显示一个  text  元素，我给了它一个动画（从上到下），但现在我创建了另一个按钮，点击后将删除  元素中的文本想在发生这种情况时添加动画，但是当我编写 CSS 以在删除时为文本设置动画时，它似乎会覆盖之前的动画。

CSS 中是否有 if else 语句，或者我可以在 JavaScript 中使用它吗？这是普通的 JavaScript 和 CSS。

<button class="button" onclick="Click()">click me</button>
<p id="appear" hidden>This text should appear on click</p>

<button class="butremove" onclick="ClickRemove()">click me to delete message</button>

@keyframes buttonappear { 
  0% {top: 10px;}
  100% {top: 175px;}
}

#appear {
  position: absolute;
  top: 175px;
  animation-name: buttonappear;
  animation-duration: 2.5s;
}

const Click = () => {
  document.getElementById("appear").style.display = "block";
}

const ClickRemove = () => {
  document.getElementById("appear").style.display = "none";
}

我可以使用什么 CSS 或 JS 代码在文本消失而不覆盖之前的动画时为其设置动画？

【问题讨论】：

标签： html css css-animations

【解决方案1】：

您可以使用transition 属性并在 元素上切换CSS 类，而不是使用@keyframes 动画。由于您想要执行动画以响应动作，transition 非常适合这种情况。动画中的反转状态也会自动处理。

这是一个例子：

这里的方法是在元素上设置隐藏样式，并定义一个包含可见样式的单独类（visible）。根据单击的按钮，visible 类将添加到  元素中或从中删除，transition 将在两种样式之间进行动画处理。

const message = document.querySelector("#message");

function clickShow() {
  message.classList.add("visible");
}

function clickRemove() {
  message.classList.remove("visible");
}

#message {
  position: absolute;
  opacity: 0;
  top: 10px;
  transition: 2.5s;
}

#message.visible {
  opacity: 1;
  top: 175px;
}

<button class="button" onclick="clickShow()">click me</button>
<p id="message">This text should appear on click</p>

<button class="butremove" onclick="clickRemove()">click me to delete message</button>

实际上，如果你想只使用一个按钮来切换消息，上面的代码可以大大简化，如下所示：

const message = document.querySelector("#message");

function toggleMessage() {
  message.classList.toggle("visible");
}

#message {
  position: absolute;
  opacity: 0;
  top: 10px;
  transition: 2.5s;
}

#message.visible {
  opacity: 1;
  top: 175px;
}

<button class="button" onclick="toggleMessage()">click me</button>
<p id="message">This text should appear on click</p>

【讨论】：