JavaScript是否同时删除和添加同一类？

我试图使当一个按钮被点击时，一个元素的类被删除并重新添加回。该类提供动画

下面是javascript和JSFIDLE

var container=document.querySelector（“.container”）；
var img=document.querySelector（“img”）；
var按钮=document.querySelector（“按钮”）；
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”）；
addEventListener（“单击”，函数（）{
var randomize=Math.floor（Math.random（）*src.length）；
img.src=src[随机化]；
container.innerHTML=“”；
container.classList.remove（“活动”）；
container.classList.add（“活动”）；
});
.container{
高度：264px；
不透明度：1；
变换：旋转（20度）比例（.5）；
过渡：所有1；
宽度：400px；
}
.集装箱img{
边框：1px纯黑；
边界半径：10px；
身高：100%；
宽度：100%；
}
.主动{
不透明度：1；
变换：旋转（0度）比例（1）；
过渡：所有1；
}

接下来
您可以通过检查您正在单击的元素是否具有类来执行此操作

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");
    }
});

按钮。addEventListener（“单击”，函数（）{
var randomize=Math.floor（Math.random（）*src.length）；
img.src=src[随机化]；
container.innerHTML=“”；
if（container.classList.contains（“active”））{
container.classList.remove（“活动”）；
}否则{
container.classList.add（“活动”）；
}
});
在重新添加类之前，您可以侦听
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");
}

这样，在重新添加类之前，从删除类开始的转换就完成了。您需要确保在目标浏览器上进行测试，有些浏览器可能仍然需要事件的前缀版本。（或者，由于您知道转换设置为1秒，只需使用1秒
setTimeout
；但是使用事件可以更改CSS中的持续时间，而无需担心在第二个位置更改它。）

实例：


var container=document.querySelector（“.container”）；
var img=document.querySelector（“img”）；
var按钮=document.querySelector（“按钮”）；
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”）；
addEventListener（“单击”，函数（）{
var randomize=Math.floor（Math.random（）*src.length）；
img.src=src[随机化]；
container.innerHTML=“”；
if（container.classList.contains（“active”））{
container.classList.remove（“活动”）；
container.addEventListener（“transitionend”，handleEnd，false）；
}否则{
container.classList.add（“活动”）；
}
函数handleEnd（）{
container.removeEventListener（“animationend”，handleEnd，false）；
container.classList.add（“活动”）；
}
});
.container{
高度：264px；
不透明度：1；
变换：旋转（20度）比例（.5）；
过渡：所有1；
宽度：400px；
}
.集装箱img{
边框：1px纯黑；
边界半径：10px；
身高：100%；
宽度：100%；
}
.主动{
不透明度：1；
变换：旋转（0度）比例（1）；
过渡：所有1；
}

接下来
很抱歉，我在那里添加了其余部分。希望它能帮助沙它真正的基本内容：P但这是给我妹妹的，照片将是我的小侄子的！我们的服务器上有这么多他的照片，这不适合我们的手机，哈哈。所以这是一个很好的方式来查看他的随机图像。嘿，谢谢你的输入！这似乎实现了切换效果。我想让动画在每次点击按钮时运行，这意味着图像会弹出屏幕。谢谢，我不知道css相关的事件侦听器。我要试着调整一下，把它放到我需要的地方。谢谢