Javascript CSS 过渡到 display:none 解决办法？

Question

当使用 opacity: 0 动画元素消失时，然后将显示 属性 设置为 'none' 以将其从视图中删除，display:none 立即执行，是否存在无论如何要等待动画完成，然后再使用 display:none

将其从视图中移除

这是以下示例：http://jsfiddle.net/zg3q7jLt/38/

var box = document.querySelector('#box');

function addCssTransition(elem, speed) {
                elem.style.cssText +=
                    ';transition: all ' + speed + 's ease-in-out; ' +
                    '-moz-transition: all ' + speed + 's ease-in-out;' +
                    '-webkit-transition: all ' + speed + 's ease-in-out';
}

function fadeOut(elem, speed){
        addCssTransition(elem, speed);
        elem.style.opacity = 0;
        elem.style.display = 'none';
}

fadeOut(box, 0.75);

Answer 1

显示：none 没有过渡，因为您不能部分显示。

你可以这样设置超时：

var box = document.querySelector('#box');

function addCssTransition(elem, speed) {
                elem.style.cssText +=
                    ';transition: all ' + speed + 's ease-in-out; ' +
                    '-moz-transition: all ' + speed + 's ease-in-out;' +
                    '-webkit-transition: all ' + speed + 's ease-in-out';

setTimeout(function(){ 
 elem.style.cssText +=
                    ';display:none';

}, speed);
}

function fadeOut(elem, speed){
        addCssTransition(elem, speed);
        elem.style.opacity = 0;
        elem.style.display = 'none';
}

fadeOut(box, 0.75);

Answer 2

您可以监听转换结束事件，但目前 problematic and in flux。

你最安全的选择可能是 setTimeout():

function fadeOut(elem, speed){
  addCssTransition(elem, speed);
  elem.style.opacity = 0;

  setTimeout( function() { elem.style.display = 'none'; }, speed * 1000 );
}