ng-show will not trigger animation when initially loaded

Question

ng-show will not trigger animation when initially loaded

I am working with the following HTML code:

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

Every panel within this code contains the class fade-in-right, which is defined as follows:

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

Interestingly, when an element is hidden using ng-show, the animation associated with the class does not trigger.

Could someone shed some light on why this might be happening?

javascript angularjs animation

Answer 1

Answer №1

To eliminate the jumping effect and display only one element at a time, check out 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>

Answer 2

To eliminate the jumping effect and display only one element at a time, check out 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>

ng-show will not trigger animation when initially loaded

Answer №1

Similar questions

"Encountered a malfunction in the dialogue system on the second attempt

Issue with Angular Material Table: Dragged rows do not drop in the correct position when scrolling

Creating dynamic buttons with event listeners and parameters in JavaScript using jQuery

Flaw in Basic Function Logic Using HTML, JavaScript, and CSS

Encountering the error "TypeError: Router.use() is expecting a middleware function but received undefined" when attempting to import a router from another file

Error message received from Express middleware: "Unable to modify headers after they have been sent."

Masking Aadhaar numbers

Disallow the use of restricted globals in a TypeScript project when utilizing Object.values in ESLint

How can I replace specific text with HTML code in a webpage?

Variable used to invoke a Javascript namespace

Error message: Unable to locate module using import instead of require

Unable to set up npm for node-resemble on macOS

Bind a tree structure in Knockout by linking parent IDs to the primary key column

Step-by-step guide on populating input fields with JSON data for each row

Preventing form submission when selecting an address from Google Maps autocomplete in AngularJS

Angular makes it easy to perform HTTP requests using the `http

Switch videos within the video tag as you scroll

Using `getJson` to parse the tree structure

jQuery: Managing and modifying values for dynamically generated input elements

Displaying a page using express.Router()