ng-show仅在加载时不运行动画

Question

我有以下html：

fade-in-right

每个小组都有类 .fade-in-right.ng-enter { -webkit-animation: fadeInRight 0.5s; animation: fadeInRight 0.5s; } .fade-in-right.ng-leave { -webkit-animation: fadeOutLeft 0.5s; animation: fadeOutLeft 0.5s; } ，其定义如下：

ng-show

但是当stage.displayState = StageDisplayState.FULL_SCREEN; import flash.media.Video; import fl.video.FLVPlayback; var connection:NetConnection = new NetConnection(); var stream:NetStream; var Speed:Number; var SeekPoint:Number; var Rewind:Boolean ; var Forward:Boolean ; var video:Video = new Video(1130,510); var metaObj:Object = new Object(); function onMetaData(data:Object):void { } connection.connect(null); stream = new NetStream(connection); stream.client = metaObj; metaObj.onMetaData = onMetaData; video.attachNetStream(stream); addChild(video); stream.play("Sequence 01_1.flv"); video.x = 0; video.y = 0; rw.addEventListener(MouseEvent.MOUSE_DOWN, rw_CLICK); function rw_CLICK(event:MouseEvent):void { trace("StartForward Called"); Speed = Speed +10; trace("SeekSpeed: " + Speed); SeekPoint = video.playheadTime; trace("Initial PlayHead Time: " + SeekPoint); video.stop(); Rewind = false Forward= true; //video.addEventListener(Event.FRAME_CONSTRUCTED,OnConstructFrame); } function OnConstructFrame(event:Event):void { if(Forward) { if(video.playheadTime >= SeekPoint) { trace("Before Seek Cal.: " + SeekPoint); SeekPoint = SeekPoint + Speed; trace("After Seek Cal.: " + SeekPoint); video.seek(SeekPoint); /* if(SeekPoint > ftime) { Forward=false; // video.removeEventListener(Event.FRAME_CONSTRUCTED,OnExitFrame); }*/ } } } 隐藏元素时，动画不会触发。

谁能告诉我为什么？

Answer 1

要删除跳转并且一次只显示一个元素，请参阅Angular: Applying Animations /使用CSS关键帧动画制作动画视图

angular.module('app', ['ngAnimate']).controller('controller', function($scope) {
  $scope.questions = [{
    title: 'Question 1'
  }, {
    title: 'Question 2'
  }, {
    title: 'Question 3'
  }, {
    title: 'Question 4'
  }, {
    title: 'Question 5'
  }];
});

.view-container {
  position: relative;
}
.fade-in.ng-enter,
.fade-in.ng-leave {
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.fade-in.ng-enter {
  -webkit-animation: 0.5s fade-in;
  -moz-animation: 0.5s fade-in;
  -o-animation: 0.5s fade-in;
  animation: 0.5s fade-in;
  z-index: 100;
}
.fade-in.ng-leave {
  -webkit-animation: 0.5s fade-out;
  -moz-animation: 0.5s fade-out;
  -o-animation: 0.5s fade-out;
  animation: 0.5s fade-out;
  z-index: 99;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-moz-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular-animate.js"></script>
<div ng-app="app" class="container w-xxxl w-auto-xs " ng-controller="controller">
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default" ng-click="current_question = 0">1</button>
    <button type="button" class="btn btn-default" ng-click="current_question = 1">2</button>
    <button type="button" class="btn btn-default" ng-click="current_question = 2">3</button>
    <button type="button" class="btn btn-default" ng-click="current_question = 3">4</button>
    <button type="button" class="btn btn-default" ng-click="current_question = 4">5</button>
  </div>
  <div class="view-container">
    <div class="panel box-shadow fade-in" style="opacity: 0.9" ng-repeat="question in questions" ng-if="current_question == $index">
      <div class="panel-heading b-b">
        <h1 class="h2 margin-none">{{question.title}}?</h1>
      </div>

    </div>

  </div>
</div>