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

Question

我有一个按钮，点击它会显示一个  text  元素，我给它一个动画（从上到下），但现在我创建了另一个按钮，点击它会删除  text  中的文本=14=] 元素我想在发生这种情况时添加动画，但是当我编写 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 代码在文本消失时为文本设置动画而不覆盖之前的动画？

Answer 1

不使用 @keyframes 动画，您可以使用 transition 属性并在  上切换 CSS class元素。由于您想执行动画以响应某个动作，因此 transition 非常适合这种情况。反转状态 mid-animation 也会自动处理。

这是一个例子：

这里的方法是在  元素上设置隐藏样式，并定义一个包含可见样式的单独 class (visible)。根据单击哪个按钮，visible class 将添加到  元素或从中删除 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>

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

How to apply different animation on the same text when two different buttons are clicked

html

css

css-animations