Javascript 在不透明度之间快速切换不会'；t触发器转换

每当您将

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

正如您所看到的，这确实是一段混乱的代码，但到目前为止，超时是我发现唯一有效的方法。但是，只有当元素的显示设置为“无”时，才会发生这种情况。它有时被设置为none，因为我有另一个方法隐藏给定的元素。如您所见，我首先将（隐藏）元素设置为

display:block

，添加CSS转换，将其

opacity

设置为

0

，然后设置为

1

。切换到

opacity:1

时，超时对于转换到触发器至关重要。 你能看出我做错了什么吗

---

具体地说，我想做的不是依赖于超时，因为它们不能很好地工作（有时转换仍然不会触发），并且因为它们看起来不“自然”。作为一个副作用，我想知道为什么会发生这种情况，如果你能帮忙的话。多谢各位

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

---

最好的方法可能是通过更改类来处理，而不是根据您的需要使用style属性来设置属性。

为什么不使用jquery，它具有内置的fadeIn或fadeOut？或者，使用css？检查此项