在AngularJS中，可以使用ngAnimate模块来创建动画效果。下面是一个示例代码，演示如何使用动画逐步折叠和展开手风琴。

首先，确保已经在应用程序中引入了ngAnimate模块：

然后，创建一个包含手风琴项的HTML模板：

  Toggle Accordion
  

    

      
{{ item.title }}
      

        {{ item.content }}
      
    
  

在上面的代码中，我们使用ng-class指令动态添加或删除“active”和“collapsed”类，以便在展开或折叠手风琴项时应用不同的样式。

接下来，创建一个AngularJS控制器，并在其中定义toggleAccordion和toggle函数：

angular.module('myApp', ['ngAnimate'])
.controller('myCtrl', function($scope) {
  $scope.items = [
    { title: 'Item 1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
    { title: 'Item 2', content: 'Nulla vitae elit libero, a pharetra augue.' },
    { title: 'Item 3', content: 'Vestibulum id ligula porta felis euismod semper.' }
  ];
  
  $scope.activeIndex = -1;
  $scope.collapsed = false;
  
  $scope.toggleAccordion = function() {
    $scope.collapsed = !$scope.collapsed;
  };
  
  $scope.toggle = function(index) {
    $scope.activeIndex = ($scope.activeIndex === index) ? -1 : index;
  };
});

在控制器中，我们定义了一个items数组，其中包含要在手风琴中显示的项目。activeIndex变量用于跟踪当前活动的手风琴项的索引。collapsed变量用于控制手风琴是否折叠。

最后，在CSS样式表中添加以下样式：

.accordion-container {
  width: 300px;
}

.accordion-item {
  border: 1px solid #ccc;
  margin: 5px;
  overflow: hidden;
  transition: all 0.5s ease;
}

.accordion-item h3 {
  margin: 0;
  padding: 10px;
  background-color: #f5f5f5;
  cursor: pointer;
}

.accordion-item.active {
  height: auto;
}

.accordion-item.collapsed {
  height: 0;
}

在上面的代码中，我们使用transition属性和height属性来创建逐步折叠和展开动画效果。

现在，在浏览器中加载该页面，您将看到一个手风琴，当单击标题时，它将逐步展开或折叠。