Book Image

Learning AngularJS Animations

By : Richard Keller
Book Image

Learning AngularJS Animations

By: Richard Keller

Overview of this book

Table of Contents (15 chapters)
Learning AngularJS Animations
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

JavaScript animations as a fallback for CSS animations


We might have to create animations for browsers that do not have support for CSS animations and transitions yet. It might be part of a project's requirements.

In this case, we can still use JavaScript animations as a fallback for CSS animations. However, what if we add a CSS animation and a JavaScript animation for the same element and the browser has support for CSS animations?

We don't want to display the same animation twice, so we will use Modernizr, a JavaScript library that detects HTML5 and CSS3 features in the user's browser.

Note

Learn more about Modernizr at http://modernizr.com.

In such cases, we will trigger the JavaScript animations only if CSS transitions are not supported by the browser.

Here, we have a sample of the ngIf animation that uses a transition if the browser has support for CSS transitions; otherwise, it triggers the JavaScript animation fallback with the same animation effect, shown as follows:

<!DOCTYPE html&gt...