Question

每当你有一个display属性设置为none的元素时，你会尝试触发转换，以便＆＃34;淡入＆＃34; ，它会快速跳转到完全不透明，除非你添加超时。你知道怎么解决这个问题吗？暂停工作，有点，但不是我想要的。这就是我所拥有的：

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时才会发生这种情况。并且它有时会设置为none，因为我有另一种隐藏给定元素的方法。如您所见，我首先将（隐藏）元素设置为display: block，我添加了CSS转换，将其opacity设置为0，然后设置为{ {1}}。切换到1时，超时对于触发转换至关重要。有没有什么可以看出我做错了？

我特别想做的是，不依赖于超时，因为它们不能很好地工作（过渡时间仍然没有触发），并且因为它们没有＆＃39 ; t似乎＆＃34;自然＆＃34;。作为一个副作用，我想知道为什么会发生这种情况，如果你能提供帮助的话。谢谢。

Answer 1

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

可能最好的方法是通过更改类来处理它，而不是使用style属性设置属性，尽管如此。

不透明之间快速变化不会触发转换

1 个答案: