不能以平滑的方式更改div的高度

Question

我正在将div的高度和填充动画设置为从auto值自动设置为0，从10px设置为0。

由于某种原因，动画突然开始，然后变为线性样式。我究竟做错了什么？ 检查小提琴：http://jsfiddle.net/j6s2kxeg/5/

html

<div class="notification">Message.
  <span id="cancel-notification">cancel</span>
</div>

css

.notification {
  color: white;
  text-align: center;
  background-color: black;
  padding: 10px 10px;
  transition-duration: 2s;
  overflow: hidden;
}

#cancel-notification {
  display: block;
  float: none;
  color: grey;
  font-size: 90%;
  cursor: pointer;
}

js

['click', 'touchstart'].forEach(function(e) {
  document.getElementById("cancel-notification").addEventListener(e, function(event) {
    var notification = document.querySelector(".notification");
    notification.style.color = "black";

    setTimeout(function() {
      notification.style.height = "0";
      notification.style.padding = "0";
    }, 2000);
  });
});