使用 css 动画删除列表项

Question

我制作了 showing/hiding 消息列表的动画。参见 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

如果对您有帮助，您可以尝试关注。单击删除而不是删除元素时，只需在其父元素 div messages.

上添加 class messages-remove

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

同时在您的样式中添加以下 CSS sheet。

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

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

Answer 2

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

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

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

使用 css 动画删除列表项

Animate removal of list items with css

css

animation

css-animations

angularjs