Transition Demo

Basic

 
<div class="transition_target"></div>
$(".transition_target").transition({
  always: true
}, function() {
  // Tranition complete...
}).addClass("active");
.transition_target {
  background: black;
  transition: background 0.25s;
}

.transition_target.active {
  background: blue;
}

Delegation

 
<div class="transition_target">
	<div class="transition_child"></div>
</div>
$(".transition_target").transition({
  always: true,
  target: ".transition_child"
}, function() {
  // Tranition complete...
}).addClass("active");
.transition_target .transition_child {
  background: black;
  transition: background 0.25s;
}

.transition_target.active .transition_child {
  background: blue;
}

Property

 
<div class="transition_target"></div>
$(".transition_target").transition({
  always: true,
  property: "height"
}, function() {
  // Tranition complete...
}).addClass("active");
.transition_target {
  background: black;
  height: 10px;
  transition:
    background 0.25s linear 0s,
    height 0.25s linear 1s;
}

.transition_target.active {
  background: blue;
  height: 30px;
}