CSS Master

var transitionendHandler = function(eventObject) {

eventObject.target.setAttribute('hidden', '');

document.getElementById('thanks').removeAttribute('hidden');

};

document.addEventListener('transitionend', transitionendHandler);

OurtransitionendHandleracceptsasingleeventobjectargument.Herewe’ve
namediteventObject,butyoucouldnameitevt,foo—justaboutanything.This
eventobjectispassedautomatically,accordingtobehaviordefinedbytheDocument
ObjectModel,Level 2 specification.Inordertoreferencethiseventobjectwithin
ourhandler,weneedtodefineitasaparameterforourfunction.

Everyeventobjectincludesatargetproperty.Thisisareferencetotheelement
thatreceivedtheevent.Inthiscaseit’salistitem,andwe’readdingahiddenattrib-
utetoeach(eventObject.target.setAttribute('hidden', '')).Thelastlineof
oureventhandlerremovesthehideclassfromour“Thankyou”message,asseen
inFigure5.8.

Figure 5.8. Our form after the user has chosen an option and the transitionend event fires

ThejQueryequivalentfollows:

Transitions and Animation 207