如何使用Angular.js和CSS赋予动画效果

Question

I need one help. 我需要一个帮助。 I want to add some animation effect while click on the link using Angular.js. 我想在使用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: 的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 . 在这里，当我单击链接时，下面的div是隐藏/显示的，但是在这里，我需要提供一些过渡效果，例如slide up/down 。 Here is my full plunkr code. 这是我完整的plunkr代码。 Please help. 请帮忙。

Answer 1

You can use ng-animate to achieve this 您可以使用ng-animate实现此目的

Here is the documentation with a working example http://www.nganimate.org/ 这是带有工作示例的文档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 您还可以创建自己的自定义CSS动画类，并在点击操作中使用$ animate添加或删除CSS类。

如何使用Angular.js和CSS赋予动画效果

问题描述

1 个解决方案

解决方案1
1 2017-10-31 10:11:37

如何使用Angular.js和CSS赋予动画效果

问题描述

1 个解决方案

解决方案1 1 2017-10-31 10:11:37

解决方案1
1 2017-10-31 10:11:37