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