HTML and CSS Reference
In-Depth Information
If the Modernizr test returns
false
, the animation won't work; instead you
set the
left
property of the form to
0rem
to make the form appear on the screen
in one go, and set the form
class
to
form-fallback
so that the second part of the
function will run when the user tries to hide the form again (if you don't do this,
the second part of the function will never run because the form
class
will always
be blank). It's not as nice-looking, but at least it works.
The last part of this section of the code (the
h1.innerHTML
part) changes the
text inside the
<h1>
element to a message telling users they can hide it again if
they want to.
If the outer
if
test returns false, then the form must be onscreen, and the code
inside the
else
block is executed, which runs another
modernizr.cssanimations
test. If this returns
true
, the code changes the
class
value to
form-in
to animate
it offscreen again. If it returns
false
, the
left
property is returned to its original
value—to move it offscreen again in a less glamorous manner—and the form
class
is set to blank again to return it to its original state.
The last part of the
else
block changes the
<h1>
text back to what it was
originally.
Now on to the second function,
rotateForm()
:
function rotateForm() {
if(Modernizr.cssanimations && Modernizr.csstransforms3d) {
;
t = ;
} else {
x = ;
}
}
Here, if
Modernizr.cssanimations
AND
Modernizr.csstransforms3d
are true,
I've used
setAttribute
to set the
<form>
's class attribute to
form-rotate
. This
applies the rotate animation to the form, making it rotate to reveal the “Thank
Yo u ” m e s s a g e . B u t s e t t i n g t h e
<form>
's class to
form-rotate
will override the class
of
form-out
set earlier, which would cause the form to move offscreen again;
