CODEWITHSUNDEEP
javascriptcssangularjs
user5443928
user5443928

Reputation:

How to give animation effect using Angular.js and CSS

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.

Upvotes: 0

Views: 51

Answers (1)

Hari Haran
Hari Haran

Reputation: 97

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

Upvotes: 1

Related Questions