Question

因此，当放置进度条并为jquery中的“ readystatechange”事件设置进度动画时，我发现了一个不便之处。这只是我的具体示例，但我相信通常与隐藏元素的过渡有关，然后在过渡发生后显示该元素。

这里是事件触发前处于初始状态的进度条的html。

<div class="progress">
    <div class="progress-bar d-none d-xl-block" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

这是根据文档的readyState更改样式的jquery。

$(document).on('readystatechange', function(){
    if(document.readyState === 'interactive')
    {
        $('.progress-bar').css('width', "30%");
    } else if(document.readyState === 'complete') {
        $('.progress-bar').css('width', '100%');
    }
});

问题在于，我需要在移动设备/平板电脑上隐藏此元素，并且在我使用

时

d-none d-xl-block

需要转换的元素上的类，即使通过元素检查器显示的属性正确显示，也不会显示转换。

的灰色背景（默认）

<div class="progress"></div>

仅显示重叠元素

<div class="progress-bar"></div>

不显示。我可以通过检查器看到.progress-bar的宽度正确设置为'100％'，并且显示设置为'block'。

是否有解决此问题的方法，无论是纯CSS还是js还是混合方法，都值得解决吗？

使用Bootstrap 4，Firefox和jQuery 3.3.1作为参考。

edit：仅在.progress-bar元素上将显示设置为“阻止”时，此功能可以正常工作，而在隐藏/显示该元素时，此功能无法正常工作。

响应显示的元素不显示过渡

0 个答案: