css3 中dispaly:none 动画处理

大体思路，将动画过程添加在当前状态与display为none之间，在display为none之前，保存一个状态为视觉为空。监听css3的transitionend 在，动画完成后为元素添加 display 为none：
上代码
使用的less在构建项目，为了避免对其他依赖冲头，这里将样式的前缀抽离了出来。

@prefix: nb;
.@{prefix}-hidden {
  display: none;
}

.@{prefix}-visuallyhidden {
  max-height: 50px;
  overflow: hidden;
  opacity: 0;
  width: 0 !important;
}

编译后的css

.nb-hidden {
  display: none;
}
.nb-visuallyhidden {
  max-height: 50px;
  overflow: hidden;
  opacity: 0;
  width: 0 !important;
}

js代码

    var an_prefix = 'nb';
    var hide = function (ele) {
        ele.classList.add(an_prefix + '-visuallyhidden');
        var handle = function () {
            ele.classList.add(an_prefix + '-hidden')
            ele.removeEventListener('transitionend', handle)
        }
        ele.addEventListener('transitionend', handle)
    }
    var show = function (ele) {
        ele.classList.remove(an_prefix + '-hidden');
        setTimeout(function () {
            ele.classList.remove(an_prefix + '-visuallyhidden');
        }, 100)
    }