transition event

by jpeter06

HTML

<div id="id1" class="normal animate" style="position:absolute;display:block;width:40%; height:40%;background:red;left:30%;top:30%;">
    <button onclick="mover()">mover</button>
</div>

CSS

html , body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}

.moveDiv{
    left:60% !important;
}
.moveDiv2{
    top:60% !important;
}

.animate{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
}

JavaScript

function mover(){
    console.log("moving");
    $('#id1').toggleClass("moveDiv");
	  $('#id1').one(transitionEvent,mover2);
}

function mover2(){
    $('#id1').toggleClass("moveDiv2");
}


function whichTransitionEvent(){
  var t,
      el = document.createElement("fakeelement");

  var transitions = {
    "transition"      : "transitionend",
    "OTransition"     : "oTransitionEnd",
    "MozTransition"   : "transitionend",
    "WebkitTransition": "webkitTransitionEnd"
  }

  for (t in transitions){
    if (el.style[t] !== undefined){
      return transitions[t];
    }
  }
}

var transitionEvent = whichTransitionEvent();
console.log(transitionEvent);