html 清除animation,使用css动画删除列表项 - Animate removal of list items with css - 开发者知识库...

I have made the animation of a showing/hiding a list of messages. See this plunk. But how can I adapt it to also make an animation when a message is removed from the list?

我制作了显示/隐藏消息列表的动画。看到这个插件。但是,当从列表中删除消息时,我如何调整它以制作动画?

My 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;

}

My index file (using Angular):

我的索引文件(使用Angular):

Show messages

(current: {{test.toggle}})

{{message}} remove

2 个解决方案

#1

1

The idea is to set the height of container and add transition to the height.

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

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

#2

1

You can try following if it may help you. On clicking remove instead removing element just add class messages-remove on it's parent div messages.

如果它可以帮助您,您可以尝试以下。单击删除而不是删除元素只需添加类消息 - 删除它的父div消息。

For e.g: It should become

例如:它应该成为

Also add the following CSS in your style sheet.

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

.messages-active.messages-remove.messages,

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

Let me know if you have any question.

如果您有任何疑问,请告诉我。