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}})
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