Building A Relationship Between CSS & JavaScript - Practical JavaScript Techniques - page 142

development model, while providing the proper fallbacks for browsers that might not support
the CSS transition we're going to use.

For this example we'll be using:

•

jQuery 3

•

Modernizr 4

First, let's set up our body element:

< body >
< button type =" button "> Run Transition </ button >
< div id =" cube "></ div > <!--/#cube-->
</ body >

From there we'll need to set up the CSS:

#cube {
height : 200px ;
width : 200px ;
background : orange ;
-webkit-transition : opacity linear .5s ;
-moz-transition : opacity linear .5s ;
-o-transition : opacity linear .5s ;
transition : opacity linear .5s ;

}

.fade-out {
opacity : 0 ;

}

Before we add on the JavaScript layer, lets take a moment and talk about the flow of
what's going to happen :

•

Use Modernizr to check for CSS Transition support