HTML and CSS Reference
In-Depth Information
/* extra */
// add the class for the out effect
var questView = document.getElementById('quest');
questView.classList.add('out');
/* end extra */
}
Since, we have overridden the
hide
method from the scene object, we need to call the
prototype's hide using the scope of
gameScene
. Then, we add our extra logic to add the
out
class to the quest DOM element.
We deine the dropping efect with CSS transform and transiion:
#quest.out {
transition: all .8s ease-out;
transform: translateY(800px) rotate(50deg);
}
The
out
object of the game scene is a delayed fading out transiion:
#game-scene.out, #summary-scene.in {
transition-delay: .5s;
}
In addiion, we used the transiion delay to make sure that the drop animaion is displayed
before the scene goes out and the next scene goes in.
Some new properies of CSS are not stable yet. When a vendor adds support
to these styles, they add a vendor-prefix to the property. The vendor prefix
indicates that the user should use that property with cauion.
In this project, we will omit all the vendor-prefixes for clarity when showing
the code in the topic. In order to make sure that the code works in a browser,
we may need to add the following vendor prefixes:
-webkit-
(for Chrome
and Safari),
-moz-
(for Mozilla Firefox),
-o-
(for Opera), and
-ms-
(for
Internet Explorer).
If you find adding prefixes troublesome, you may use some tools for help.
The tool
prefix-free
(
http://leaverou.github.io/prefixfree/
)
is one that can help. Compile tools will add these prefixes for you, such as
CSS preprocess compilers.
