How to give animation effect using Angular.js and CSS

Question

I need one help. I want to add some animation effect while click on the link using Angular.js. I am explaining my code below.

<body ng-controller="demoController">
  <div class="panel-group accordionsection" id="accordion" style="width:100%;">
    <div class="panel panel-default">
      <div class="mainaccordion_title-width panel-heading" role="tab" ng-click="active = !active">

        <a class="panel-title sky-blue-light" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true">
          <i class="glyphicon glyphicon-plus"></i> Description
        </a>
      </div>
      <div id="collapse1" class="panel-collapse collapse in" >
        <div class="panel-body" ng-hide="active">
          <p style="white-space:pre-wrap;">
            Demonetization of currency means discontinuity of the particular currency from circulation and replacing it with a new currency. In the current context it is the banning of the 500 and 1000 denomination currency notes as a legal tender.
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

script.js:

var app=angular.module('demo',[]);
app.controller('demoController',function($scope){
  $scope.active=false;
})

Here when i am clicking on the link the below div is hiding/showing but here I need to give some transition effect like slide up/down. Here is my full plunkr code. Please help.

you can use this link, here the hide/show of the content is being animated using Angular after some duration. — Manpreet Matharu
– Manpreet Matharu, Commented Oct 31, 2017 at 10:16

Hari Haran · Accepted Answer · 2017-10-31 10:37:07Z

1

You can use ng-animate to achieve this

Here is the documentation with a working example http://www.nganimate.org/

You can also create your own custom css animation class and use $animate to add or remove your css class on the click action

edited Oct 31, 2017 at 10:37

answered Oct 31, 2017 at 10:11

Hari Haran

975 bronze badges

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

Collectives™ on Stack Overflow

How to give animation effect using Angular.js and CSS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related