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

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


Source: css3

Leave a Reply