Day 341

Using jquery and classes to control transitions...
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

<div class="parent">
  <div class="button">Click Me</div>
  <div class="box"></div>
</div>

---------- CSS ----------

* {
  box-sizing: border-box;
}

.parent {
  text-align: center;
  padding: 50px;
}

.button {
  border-radius: 3px;
  background: red;
  color: #fff;
  display: inline-block;
  padding: 15px 25px;
}

.box {
  background: black;
  width: 200px;
  height: 200px;
  transition: all 0.6s ease-in-out;
  transform: translate3d(0, 0, 0);
}

.one {
  transform: translate3d(500px, 0, 0);
}

.two {
  transform: translate3d(500px, 500px, 0);
}

.three {
  transform: translate3d(0, 500px, 0);
}

---------- JS ----------

var stateLocation = 0;
$(document).on("click", ".button", function() {
  switch (stateLocation) {
    case 0:
      if ($(".box").hasClass("three")) {
        $(".box").removeClass("three");
      }
      stateLocation = 1;
      break;
    case 1:
      $(".box").toggleClass("one");
      stateLocation = 2;
      break;
    case 2:
      $(".box").removeClass("one");
      $(".box").addClass("two");
      stateLocation = 3;
      break;
    case 3:
      $(".box").removeClass("two");
      $(".box").addClass("three");
      stateLocation = 0;
      break;
  }
});