如何使用给定脚本禁用 css 过渡加载-解网

问：

我是jQuery的新手，需要弄清楚如何禁用导航栏的加载转换。目前，当您加载页面时，导航栏会过渡到一个大的白色条，然后稳定下来。

这是我所拥有的。导航栏在页面向上滚动时消失，效果很好;唯一的问题是在初始页面加载时，我不想进行任何过渡。

<script>
    jQuery(function($) {
        var topPosition = 0;

        $(window).scroll(function() {
            var scrollMovement = $(window).scrollTop();

            if (topPosition < 200) {
                // Add any additional logic for topPosition less than 200 if needed
            } else {
                if (scrollMovement > topPosition) {
                    $('#global-header-section').removeClass('show-header');
                    $('#global-header-section').addClass('hide-header');
                } else {
                    $('#global-header-section').removeClass('hide-header');
                    $('#global-header-section').addClass('show-header');
                }
            }
            topPosition = scrollMovement;
        });
    });
</script>

<style>
    #main-content {
        margin-top: 7vw;
    }

    .hide-header {
        opacity: 0;
        margin-top: -200px !important;
    }

    .show-header {
        opacity: 1;
        margin-top: 0px !important;
    }

    #global-header-section {
        -webkit-transition: all 0.5s ease !important;
        -moz-transition: all 0.5s ease !important;
        -o-transition: all 0.5s ease !important;
        -ms-transition: all 0.5s ease !important;
        transition: all 0.5s ease !important;
    }
</style>

jquery css css-transitions 页面加载

// Then in your JS code
<script>
jQuery(function ($) {
    // Add a class to disable transition on page load
    $('#global-header-section').addClass('disable-transition');
    // Remove the class after a short delay 
    // You can adjust the time it takes to remove the class. here is half a  second 
    setTimeout(function () {
        $('#global-header-section').removeClass('disable-transition');
    }, 500);
  /* ... Your existing styles ... */
    
});
</script>

/*In your CSS code add:*/
<style>
    /* ... Your existing styles ... */

    #global-header-section.disable-transition {
        transition: none !important;
    }
</style>

上一个：即使在正确的过渡规则之后，CSS Transition 对我来说也无法反向工作

下一个：虚拟时钟臂的最后一个滴答动画

如何使用给定脚本禁用 css 过渡加载

How to disable css transition load with given script

评论