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