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: ...
Comments
Post a Comment