在不透明度之间快速变化不会触发过渡

Question

当您将一个元素的display 属性设置为none 时，您尝试触发过渡以使其“淡入”，它会快速跳转到完全不透明，除非你添加一个超时。你知道如何解决这个问题吗？超时工作，有点，但没有我想要的那么好。这是我所拥有的：

fadeIn: function(speed) {
    var len = this.length,
        speed = speed || '1000',
        transitionString = 'opacity ' + speed + 'ms';
    while (len--) {

        el = this[len]; //*this* is an object containing DOM elements

        (function motherLoop(el, len) {

            setTimeout(function () {

                el.style.display = 'block';

                el.style.transition = transitionString;

                el.style.opacity = 0;    

                //timeout needed for transition to trigger...

                (function babyLoop(el, len) {
                    setTimeout(function () {
                        el.style.opacity = 1;
                        if(len--) babyLoop(el, len);
                    }, 10);
                })(el, len);


                function transitionEnd() {

                    el.removeEventListener('transitionend', transitionEnd);
                    el.style.opacity = '';
                    el.style.transition = '';

                }
                el.addEventListener('transitionend', transitionEnd);
                if(len--) motherLoop(el, len);
            }, 50);

        })(el, len);
    }
    return this;
}  

如您所见，这确实是一段杂乱无章的代码，但到目前为止，我发现超时是唯一可行的方法。但是，只有当元素的显示设置为无时才会发生这种情况。它有时设置为无，因为我有另一种隐藏给定元素的方法。如您所见，我首先将 (hidden) 元素设置为 display: block，添加 CSS 过渡，将其 opacity 设置为 0，然后设置为 1。当切换到opacity: 1 时，超时对于触发转换至关重要。 你有什么可以看出我做错了吗？

具体来说，我想做的不是依赖超时，因为它们不能很好地工作（转换有时仍然不会触发），而且它们看起来并不“自然”。作为副作用，如果您能提供帮助，我想了解为什么会发生这种情况。谢谢你。

Answer 1

只需更改显示：无；可见性：隐藏；并将其更改为可见性：可见；使用所有其他属性（完全排除显示操作），浏览器将正确获取起点，元素将立即淡入，无需任何延迟。当您在更改显示属性的同时更改所需的不透明度/宽度/任何动画更改时，它将从这些开始。然后根据您的需要改变位置。

可能最好的方法是通过更改类来处理这个问题，而不是使用样式属性设置属性，这取决于您。