CODEWITHSUNDEEP
javascriptangularjsanimation
Marc Rasmussen
Marc Rasmussen

Reputation: 20565

ng-show does not run animation only on load

I have the following html:

<div class="container w-xxxl w-auto-xs " ng-controller="SurveyQuizController">
    <div class="panel box-shadow fade-in-right " style="opacity: 0.9" ng-repeat="question in questions" ng-show="current_question == $index">
        <div class="panel-heading b-b">
            <h1 class="h2 margin-none">{{question.question.question}}?</h1>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <multiple ng-show="question.question.question_type_id == 1"></multiple>
            </div>
        </div>
        <div class="panel-footer text-center">
            <strong class="small">{{$index+1}} out of {{questions.length}} questions</strong>
            <div class="clear">
                <a class="btn btn-default pull-left {{$index == 0 ? 'disabled' : ''}}" ng-click="previousQuestion()">Prev</a>
                <a  class="btn btn-primary pull-right" ng-click="nextQuestion()">Next</a>
            </div>
        </div>
    </div>

</div>

Each panel has the class: fade-in-right that has the following definition:

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

However when the element is hidden by ng-show the animation does not trigger.

Can anyone tell me why?

Upvotes: 0

Views: 112

Answers (1)

Michael
Michael

Reputation: 3104

To remove the jump and to show only one element at a time see Angular: Applying Animations / Animating ngView with CSS Keyframe Animations

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>

Upvotes: 1

Related Questions