Angular animation with toggle button

Question

I am new to angularjs and am trying to learn how the framework works. Here is my problem. I wrote a script to have a button showing and hiding the message. At the same time I tried to act animation when the message was being displayed. Unfortunately, I can either do one of them. As long as I combine the both in the script, I don't know why I have to remove the "hide" button to get the animation work.

Here's my script.

test.html:

<!-- test.html -->
<!DOCTYPE html>
<html ng-app='test'>

<head>
  <title>test angular animation</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.js"></script>
  <script src="test.js"></script>
  <style>
    div.ng-enter {
      transition: 2s linear all;
      opacity: 0;
    }

    div.ng-enter.ng-enter-active {
      opacity: 1;
    }
  </style>
</head>

<body ng-controller="testController as doc">
  <!-- TO MAKE THE ANIMATION WORK, THE FOLLOWING HIDE BUTTON HAVE TO BE COMMENTED, PLEASE HELP -->
  <button ng-if="doc.div_show" ng-click="doc.div_show=false">hide</button>
  <button ng-if="!doc.div_show" ng-click="doc.div_show=true">show</button>
  <div ng-if="doc.div_show">Hello World</div>
</body>

</html>

test.js:

/* test.js */
angular.module('test', ['ngAnimate'])
  .controller('testController', function() {
    var doc = this;
    doc.div_show = false;
  });

Carlos Jafet Neto · Accepted Answer · 2018-12-30 19:29:12Z

1

Change your style just as shown in angular docs, like this:

<style>
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
    transition:0.5s linear all;
    opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
    opacity:1;
}
</style>

Add a fade class to your div:

<div ng-if="doc.div_show" class="fade">Hello World</div>

answered Dec 30, 2018 at 19:29

Carlos Jafet Neto

9247 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular animation with toggle button

test.html:

test.js:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

test.html:

test.js:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related