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

Creating a custom directive animated with JavaScript


We already learned how to create CSS animations for custom directives. What if we still want to use JavaScript animations for those directives?

Remember the ngIf JavaScript animation from Chapter 4, JavaScript Animations in AngularJS? We can reuse that JavaScript animation here. We will keep using the same JavaScript declaration method that we learned in Chapter 4, JavaScript Animations in AngularJS.

For this sample, we will create a directive similar to the toggleDirective sample using the enter and leave animation methods. Check the HTML code of the following sample without any CSS:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS Custom Directives animations</title>
</head>
<body>
  <h1>AngularJS Custom Directives animations</h1>
  <div toggle-Js-class-directive="" class="ifJsAnimation">
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11...