Javascript-CSS转换到显示：无可用？

当设置元素动画使其以

不透明度：0

消失，然后将“显示”属性设置为“无”以将其从视图中删除时，

display:none

会立即执行，在使用

display: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);

---

您可以收听过渡结束事件，但这只是目前的情况

您最安全的赌注可能是

setTimeout（）

：

---

请不要jQuery，这对于12行代码是不必要的只是好奇，为什么是1000ms？这是计算淡入度的正确数值吗？您正在以秒为单位通过

速度

（视过渡情况而定）<代码>设置超时（）需要毫秒。乘以1000就可以把事情搞清楚。

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

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

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