Question

我正在尝试这样做，当点击一个按钮时，一个元素的类被删除并重新添加回来。该类提供了动画。

以下是javascript和jsfiddle

var container = document.querySelector(".container");
var img = document.querySelector("img");
var button = document.querySelector("button");

var src = ["https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg", "http://www.elementsofstyleblog.com/wp-content/uploads/2010/02/600x400-princeville-sunset.jpg"];

var active = document.querySelector("active");

button.addEventListener("click", function() {
  var randomize = Math.floor(Math.random() * src.length);
  img.src = src[randomize];
  container.innerHTML = "<img src='" + src[randomize] + "'>";
  container.classList.remove("active");
  container.classList.add("active");
});

.container {
  height: 264px;
  opacity: 1;
  transform: rotate(20deg) scale(.5);
  transition: all 1s;
  width: 400px;
}
.container img {
  border: 1px solid black;
  border-radius: 10px;
  height: 100%;
  width: 100%;
}
.active {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition: all 1s;
}

<div class="container">
  <img src="">
</div>

<button>next</button>

您会看到第一次单击该按钮时，图像会飞入。我希望每次单击该按钮时都这样做。我怎么能这样做？

Answer 1

在添加课程之前，您可以听取transitionend事件：

if (container.classList.contains("active")) {
  container.classList.remove("active");
  container.addEventListener("transitionend", handleEnd, false);
} else {
  container.classList.add("active");
}
function handleEnd() {
  container.removeEventListener("animationend", handleEnd, false);
  container.classList.add("active");
}

这样可以在将类添加回来之前完成从删除类的转换。您需要确保在目标浏览器上进行测试，有些可能仍需要事件的前缀版本。（或者，由于您知道转换设置为花费一秒钟，因此只需使用一秒setTimeout;但使用该事件可以更改CSS中的持续时间，而无需担心在第二个位置更改它。）

直播示例：

var container = document.querySelector(".container");
var img = document.querySelector("img");
var button = document.querySelector("button");

var src = ["https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg", "http://www.elementsofstyleblog.com/wp-content/uploads/2010/02/600x400-princeville-sunset.jpg"];

var active = document.querySelector("active");
button.addEventListener("click", function(){
  var randomize = Math.floor(Math.random() * src.length);
  img.src = src[randomize];
  container.innerHTML = "<img src='" + src[randomize] + "'>";
  if (container.classList.contains("active")) {
    container.classList.remove("active");
    container.addEventListener("transitionend", handleEnd, false);
  } else {
    container.classList.add("active");
  }
  function handleEnd() {
    container.removeEventListener("animationend", handleEnd, false);
    container.classList.add("active");
  }
});

.container {
  height: 264px;
  opacity: 1;
  transform: rotate(20deg) scale(.5);
  transition: all 1s;
  width: 400px;
}

.container img {
  border: 1px solid black;
  border-radius: 10px;
  height: 100%;
  width: 100%;
}

.active {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition: all 1s;
}

<div class="container">
  <img src="">
</div>

<button>next</button>

Answer 2

您可以通过检查您点击的元素是否具有该类来执行此操作。

button.addEventListener("click", function() {
    var randomize = Math.floor(Math.random() * src.length);
    img.src = src[randomize];
    container.innerHTML = "<img src='" + src[randomize] + "'>";
    if (container.classList.contains("active")) {
        container.classList.remove("active");
    } else {
        container.classList.add("active");
    }
});

JavaScript删除并同时添加同一个类？

2 个答案: