Question

使用opacity: 0动画元素消失时，将显示属性设置为＆＃39;无＆＃39;要从视图中删除它，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

您可以收听过渡结束事件，但目前只有problematic and in flux。

你最安全的赌注可能是setTimeout()：

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

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

Answer 2

显示：无法进行转换，因为您无法部分显示。

您可以像这样设置Timeout：

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

Javascript CSS转换显示：无法解决？

2 个答案: