如何通过单击按钮使图像淡入淡出？

Question

我试图在第一次单击按钮时淡入蓝色方块。然后在第二次点击时，蓝色方块淡出，红色方块淡入。

正如您在测试时看到的那样，它不是那样工作的。我不知道我哪里错了，如果有人能告诉我如何解决它，我将不胜感激。

var currentscene = 0;

function next() {
  currentscene++;
  if (currentscene = 1) {
    var element = document.getElementById("blue");
    element.classList.add("fade-in");
  }
  if (currentscene = 2) {
    var element = document.getElementById("blue");
    element.classList.add("fade-out");

    var element = document.getElementById("red");
    element.classList.add("fade-in");
  }
}

.squareblue {
  height: 50px;
  width: 50px;
  top: 50px;
  background-color: blue;
  position: absolute;
  opacity: 0;
  animation-fill-mode: forwards;
}

.squarered {
  height: 50px;
  width: 50px;
  top: 100px;
  background-color: red;
  position: absolute;
  opacity: 0;
  animation-fill-mode: forwards;
}

.fade-out {
  animation: fadeOut ease 2s
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fade-in {
  animation: fadeIn ease 2s
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div2 id="blue" class="squareblue"></div2>
<div2 id="red" class="squarered"></div2>

<button class="button" onclick="next()">next</button>

Answer 1

一些错误，还有一些需要改进的地方。

在您的 if 条件语句中，您将 1 和 2 的值分配给变量 currentscene 而不是使用比较运算符 == .我添加了 remainder 运算符以便能够无限期地继续循环。

我没有从dom每个循环中抓取元素，我只是在顶部定义元素，并继续引用保存变量。

我没有使用 css 关键帧动画，而是使用 css transition 属性来为不透明度的变化添加动画。

如有疑问，请提问

let currentscene = 0;
const blue = document.getElementById("blue");;
const red = document.getElementById("red");;

function next() {
  currentscene++;
  if (currentscene % 2 == 0) {
    blue.classList.remove("opaque");
    red.classList.add("opaque");
  }
  else if (currentscene % 2 == 1) {
    red.classList.remove("opaque");
    blue.classList.add("opaque");
  }
}

.squareblue,
.squarered {
  height: 50px;
  width: 50px;
  position: absolute;
  opacity: 0;
  animation-fill-mode: forwards;
  transition: 1s;
}

.squareblue {
  top: 50px;
  background-color: blue;
}

.squarered {
  top: 100px;
  background-color: red;
}

.opaque {
  opacity: 1;
}

button {user-select: none}

<div2 id="blue" class="squareblue"></div2>
<div2 id="red" class="squarered"></div2>

<button class="button" onclick="next()">next</button>

如何通过单击按钮使图像淡入淡出？

How to make an image fade in and another fade out with one button click?

html

javascript

css

function

mouseclick-event