CSS Master

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

var form, changeHandler;

changeHandler = function() {

// Select unchecked radio buttons. Returns a NodeList.

var notfave = document.querySelectorAll('input:not(:checked)');

// Treat the NodeList like an array

Array.prototype.map.call(notfave, function(nf) {

// Find the parent node, and add a 'fade' class

nf.parentNode.classList.add('fade');

});

};

form.addEventListener('change', changeHandler);

Whentheuserselectsacolor,ourformelementwillreceiveachangeevent.That

inturntriggersthechangeHandlermethod,whichaddsafadeclasstotheparent

elementofeachradiobutton.Thisiswhattriggersourtransition.

Using the map Method

Array.prototype.map.callisawayofusingthemapmethodoftheJavaScript

arrayobjectforarray-likeitems.TheMozillaDeveloperNetworkcoversArray.pro-

totype.map^16 indepth.

ThejQueryequivalentfollows:

var changeHandler = function() {

// Select unchecked radio buttons. Returns a NodeList.

$('input').not(':checked').parent().addClass('fade');

};

$('form').on('change', changeHandler);

Nowlet’stakealookatourtransitionendhandler.It’sslightlydifferentfromthe

otherexamplesinthischapter:

(^16) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
206 CSS Master