CSS display 不响应 transition 过渡动画

为了做一个页面返回顶部的动态图标功能，思路是通过 JS 来响应当页面滑动到距离 scrollTop 400px 时显示返回顶部的对象图标，否则即隐藏，功能已经实现，但想在隐藏与显示过渡显示渐变动画，使用过程不显得突兀。

JS 中使用 display: none; 和 display: block; 并不响应过渡动画，使用 visibility: visible; 和 visibility: hidden; 即可完成效果。

.isVisible {
  visibility: visible;
  opacity: 1;
  transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -webkit-font-smoothing: antialiased;
}
.isHidden {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -webkit-font-smoothing: antialiased;
}