Question

我制作了显示/隐藏消息列表的动画。见this plunk。但是，当从列表中删除消息时，我如何调整它以制作动画？

我的css：

.messages-active.messages {
  max-height: 50px;
}

.messages {
  -webkit-transition: max-height 1s;
  -moz-transition: max-height 1s;
  -ms-transition: max-height 1s;
  -o-transition: max-height 1s;
  transition: max-height 1s;
  background-color: AntiqueWhite;
  overflow: hidden;
  max-height: 0;
}

我的索引文件（使用Angular）：

<body ng-app="app" ng-controller="TestCtrl as test">
  <button ng-click="test.toggle = !test.toggle">Show messages</button>
  (current: {{test.toggle}})
  <div class="messages" ng-class="{ 'messages-active': test.toggle }" ng-repeat="message in test.messages">
    {{message}} <a href ng-click="test.remove($index)">remove</a>
  </div>
</body>

Answer 1

如果它对您有帮助，您可以试试。在点击删除而不是删除元素时，只需在其父级onReceivedHttpAuthRequest.上添加课程messages-remove。

例如：它应该messages到<div class="messages"。

还在样式表中添加以下CSS。

<div class="messages messages-remove"

如果您有任何疑问，请与我联系。

Answer 2

想法是设置容器的高度并将过渡添加到高度。

$scope.styles.height = $scope.messages.length * 20 + 'px';

http://plnkr.co/edit/3dnGeVoQ1DbX55WQtJjk?p=preview

使用css动画删除列表项

2 个答案: