CODEWITHSUNDEEP
javascript
user4609276
user4609276

Reputation:

JavaScript remove and add the same class simultaneously?

I'm trying to make so that when a button is clicked, an element's class gets removed and re-added back in. The class provides animations.

Below is the javascript and jsfiddle

https://jsfiddle.net/vxtjjgs7/4/

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>

You see that when the button is clicked the first time, the image flies in. I want to do that every time the button is clicked. How can I do this?

Upvotes: 1

Views: 1118

Answers (3)

Dario Corno
Dario Corno

Reputation: 1185

If anyone still interested in removing and suddenly adding the same class from a DOM element, you need to trigger a DOM reflow before the second command to apply BEFORE the first one.

Use the following:

elem.classList.remove('animclass');
void elem.offsetWidth;
elem.classList.add('animclass');

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075209

You can listen for the transitionend event before adding the class back:

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

That lets the transition from removing the class complete before you add the class back. You'll want to be sure to test on your target browsers, some may still need prefixed versions of the event. (Alternately, since you know the transition is set to take one second, just use a one-second setTimeout; but using the event lets you change the duration in the CSS without worrying about changing it in a second location.)

Live Example:

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>

Upvotes: 2

Brian Winward
Brian Winward

Reputation: 9

You can do this by checking if the element you are clicking on has the class.

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

Upvotes: 0

Related Questions