CODEWITHSUNDEEP
angularjsanimationng-animate
Sabyasachi
Sabyasachi

Reputation: 531

ng-animate is not rendering the animation the first time the angular app is loading

ng-animate is not loading the first time that angular loads the Page:

JS code: 

 module1.controller('mainController', function($scope,$rootScope, UserService) {
        $scope.exp=true
        $scope.AskUser = true;

}

HTML:

   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>

<div  class=" User-Message" ng-show="AskUser" >

       Please select the Scenario Detail
      </div>

CSS: 

.ng-hide-add         { animation:0.5s lightSpeedOut ease; }

/* //when showing the picture */
.ng-hide-remove      { animation:0.5s flipInX ease; }

/* ANIMATIONS (FROM ANIMATE.CSS) ======================== 
 flip in */
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    transform: perspective(400px);
    transform: perspective(400px);
    transform: perspective(400px);
  }
}

/*// light speed out */
@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

It works fine after subsequently changing the ng-hide="AskUser" variable to false and true. But not the first time the page loads.

Can someone let me know why?

Upvotes: 2

Views: 443

Answers (2)

Vipul Panth
Vipul Panth

Reputation: 5801

Try adding a css class as follows:

.animation {animation:0.5s flipInX ease;}

Here is the link to the working example : https://jsfiddle.net/vipul0316/op4hfjuf/3/

Upvotes: 0

Dylan
Dylan

Reputation: 1118

http://plnkr.co/edit/8JkEnfOtpdXbgf3spkrG

If you wrap your assigning of the value in a $timeout like so it will work correctly for you demonstrated in the plnkr above.

$timeout(function() {
   $scope.AskUser = true;
});

Upvotes: 1

Related Questions