使用 css 动画删除列表项答案

【问题标题】：Animate removal of list items with css使用 css 动画删除列表项
【发布时间】：2015-06-23 17:09:35
【问题描述】：

我制作了显示/隐藏消息列表的动画。见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>

【问题讨论】：

我不认为 css 动画可以解决这个问题，因为这些消息是 AngularJS 的一部分，所以你必须尝试 javascript，Angular 本身来为它们设置动画。

标签： angularjs css animation css-animations

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果对您有帮助，您可以尝试关注。在点击 remove 而不是删除元素时，只需在其父 div messages 上添加 class messages-remove。

例如：它应该变成 <div class="messages" 到 <div class="messages messages-remove"。

同时在样式表中添加以下 CSS。

.messages-active.messages-remove.messages,
.messages-remove.messages { max-height: 0px; }

如果您有任何问题，请告诉我。

【讨论】：