Question

module1.controller('mainController', function($scope,$rootScope, UserService) { $scope.exp=true $scope.AskUser = true; }未在<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>第一次加载Page：

时加载

JS代码：

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

HTML：

ng-hide="AskUser"

CSS：

.childElementCount

随后将.children().length变量更改为false和true后，它可以正常工作。但不是第一次加载页面。

有人可以告诉我原因吗？

Answer 1

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

如果你在$ timeout中包含你的值的赋值，那么它将适用于你在上面的plnkr中演示的。

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

Answer 2

尝试添加css类，如下所示：

.animation {animation:0.5s flipInX ease;}

以下是工作示例的链接：https://jsfiddle.net/vipul0316/op4hfjuf/3/

ng-animate在第一次加载角度应用时不会渲染动画

2 个答案: