CODEWITHSUNDEEP
javascriptjquerycssangularjsanimation
Complexity
Complexity

Reputation: 5830

Execute AngularJS animation using class, ng-show and ng-class

I'm quite new to Angular, so I'm affraid you will need to point in me right direction. I'm trying to execute a CSS animation using AngularJS.

If you look at the original code, a CSS animation can be executed quite easily, see this plunker:

http://plnkr.co/edit/MCY3FOV7qLk7YfyzJfob?p=preview

But, the problem is that this is working through the css class property: sample-show-hide

Let's see the following HTML:

<body ng-app="ngAnimate">
  <div ng-init="checked=true">
  <label>
    <input type="checkbox" ng-model="checked" style="float:left; margin-    right:10px;"> Is Visible...
   </label>
  <div class="check-element" ng-class="{'sample-show-hide': }" ng-show="checked"     style="clear:both;">
    Visible...
  </div>
  </div>
</body>

But now, I want the class for the animation to set through the ng-class directive, but unfortunately, the animation doesn't work anymore then.

Please have a look at this plunker: http://plnkr.co/edit/MCY3FOV7qLk7YfyzJfob?p=preview

Upvotes: 0

Views: 613

Answers (1)

Bricktop
Bricktop

Reputation: 1549

I invested some time and I think I atleast partially solved your problems:

First things first, your plnkr links both link to the same plnkr and the same version, this isn't very helpfull as I couldn't really see the difference. Additionally the latest version in your plnkr had some mistakes (e.g. not injecting ngAnimate into your angular app).

The main reason why your animation didn't work was actually your CSS code. You should read up on how it works here.

I took a working CSS from this stackoverflow answer and used it in your code.

My code is now looking like this: index.html:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Example - example-example3-production</title>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
    <link href="animations.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="controller.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular-animate.js"></script>
  </head>

  <body ng-app="OfficeUI" ng-controller="OfficeUIController as OficeUI">
    <div>
      <label>
        <input type="checkbox" style="float:left; margin-right:10px;" ng-click="isActive()"/>
 Is Visible...
  </label>
      <div class="sample-show-hide" ng-class="'reveal-animation'" ng-show="trigger" style="clear:both;">
    Visible...
  </div>
    </div>
  </body>

</html>

controller.js :

var OfficeUI = angular.module('OfficeUI', ['ngAnimate']);

// Defines the AngularJS 'OfficeUI' controller.
OfficeUI.controller('OfficeUIController', ['$scope', function($scope) {
    $scope.isActive = function(){
      $scope.trigger = !$scope.trigger;
      console.log($scope.trigger);
    };
    $scope.trigger = false;
}]);

animation.css :

body { font-family: 'Segoe UI'; color: #444; }

.sample-show-hide{
  padding:10px;
  border:1px solid black;
  background-color:white;
}


.reveal-animation.ng-hide.ng-hide-add-active {
    display: block !important;
}
.reveal-animation.ng-hide-remove {
    -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
    animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
.reveal-animation.ng-hide-add {
    -webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
    animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
}

@-webkit-keyframes enter_sequence {
    0% { opacity:0; }
    100% { opacity:1; }
}
@keyframes enter_sequence {
    0% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes leave_sequence {
    0% { opacity:1; }
    100% { opacity:0; }
}

@keyframes leave_sequence {
    0% { opacity:1; }
    100% { opacity:0; }
}

I forked (twice by accident :D ) your plnkr here.

Upvotes: 1

Related Questions