ng-belebter wird die Animation nicht das erste Mal macht der Winkel App wird geladen

Question

ng-animate ist nicht das erste Mal geladen, dass angular lädt die Seite:

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; 
    } 
} 

Es nachdem anschließend die Änderung der ng-hide="AskUser" Variable auf false und true gut funktioniert. Aber nicht beim ersten Laden der Seite.

Kann mir jemand wissen warum?

Answer 1

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

Wenn Sie Ihre Zuordnung des Wertes in einem $ timeout wickeln wie so wird es richtig für Sie oben in der plnkr demonstriert.

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

Answer 2

Versuchen Sie, eine css Klasse Zugabe wie folgt:

Hier

.animation {animation:0.5s flipInX ease;}

ist der Link zu dem Arbeitsbeispiel: https://jsfiddle.net/vipul0316/op4hfjuf/3/