CSS Master

var element, transitionEndHandler;

transitionEndHandler = function(evt) {

// Do something.

}

element = document.getElementById('el');

element.addEventListener('transitionend', transitionEndHandler);

AreyouusingjQuery?Thefunctiondefinitionstaysthesame,butthelasttwolines

canbecombined:

$('#el').on('transitionend', transitionEndHandler);

Let’sputthisknowledgetouse.Inthisexample,we’llhideunselectedformoptions

whentheuserpicksone.Our(simplified)HTMLfollows:

05-animations/transitions/transition-end.html (excerpt)

<h1>Please select your favorite color of the ones shown below.</h1>

<form>

<ul>

<li>

<input type="radio" name="favecolor" id="red"><label

➥ for="red">Red</label>

</li>

<li>

<input type="radio" name="favecolor" id="yellow"><label

➥ for="yellow">Yellow</label>

</li>

<li>

<input type="radio" name="favecolor" id="blue"><label

➥ for="blue">Blue</label>

</li>

</ul>

<div id="thanks" hidden>Thank you for selecting your

➥ favorite color.</div>

<button type="reset">Reset</button>

</form>

Andhere’sour(alsosimplified)CSS:

204 CSS Master