CSS Master

Figure 5.2. Once the transition has completed

Transitionsneedtobetriggeredbysomekindofevent.Often,thisisauserinterac-
tion.Wemighttransitionbetweencolorswhenenteringandleavinga:hoverstate,
aswe’vedonehere.Butwecanalsotriggeratransitionbyaddingorremovinga
classnameusingJavaScript.Intheexamplefollowing,we’vemodifiedelement’s
classListattributetodojustthat:

05-animations/transitions/simple-withjs.html (excerpt)

<script type="text/javascript">

var btn = document.querySelector('button');

btn.addEventListener('click', function() {

document.body.classList.toggle('change');

});

</script>

Inthecode,we’vefirstdefinedavariablenamedbtn.Ifyou’reunfamiliarwith
programming,avariableissimplyabucketofsortsthatholdsavalue.Wecanthen
usethevariableanywhereweneedthatvalue.Thevalueofbtnisourbuttonelement,
asreturnedbydocument.querySelector('button').Thedocument.querySelect-

Transitions and Animation 193