Animation How to - Animate CSS transitioning to display: none;

Question

We would like to know how to animate CSS transitioning to display: none;.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul, li {<!-- w w w. j  av  a  2s . co m-->
  display: block;
  margin: 3px;
  background: lightblue;
}

li {
  background: #eee;
  border: solid 2px #ddd;
  border-radius: 3px;
  padding: 3px;
  cursor: pointer;
  -webkit-transition: opacity linear 500ms;
}

li.gone {
  opacity: 0;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('li').click(function(e) {
    $(this).addClass('gone');
    setTimeout((function(el) {
        return function() {
            $(el).hide();
        };
    })(this), 600);
});
});//]]>  
</script>
</head>
<body>
  <ul>
    <li>Some message 1</li>
    <li>Some other message 2</li>
    <li>Even another msg 3</li>
    <li>Fourth message 4</li>
  </ul>
</body>
</html>

The code above is rendered as follows: