How to use the transition effect on a display?

Question

How to use the transition effect on a display?

Navigation

#1 by (0 votes)

0

Good morning, okay?

I'm trying, but I have not yet been able to use the transition effect to make smooth switching from display:block to display:none and vice versa.

I'm using JS for when the user rolls the page to apply display:none , however this is happening half fast, wanted it to happen slower to leave a more natural effect, could anyone help me?

var $JQuery = jQuery.noConflict()
$JQuery(function() {
            $JQuery(window).on("scroll", function() {
                if($JQuery(window).scrollTop() > 80) {
                    document.getElementById('headerTota').style.display = 'none';
                } else {
                    document.getElementById('headerTota').style.display = 'block';
                }
            });
        });

css css3 wordpress

asked by anonymous 28.02.2018 / 16:27

1 answer

problem to open Eclipse, the eclipse executable launcher was unable to locate its Custom style for React

score 0 · Answer 1

If someone needs it, it's not what they needed but it's better than before, follow the code:

.ajusHeader{background: transparent; height:0px; overflow:hidden;-webkit-transition: height 2.25s ease-in-out;-moz-transition: height 2.25s ease-in-out;-ms-transition: height 2.25s ease-in-out; -o-transition: height 2.25s ease-in-out; transition: height 2.25s ease-in-out;}

.BlocoMenuTotBg{width: 100%;margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;}
.ajusMenu{top: 0;z-index: 999999;position: fixed;}

var $JQuery = jQuery.noConflict()
$JQuery(function() {
            $JQuery(window).on("scroll", function() {
                if($JQuery(window).scrollTop() > 80) {
                    $JQuery(".headerTopBg").addClass("ajusHeader");
                } else {
                    $JQuery(".headerTopBg").removeClass("ajusHeader");
                }
                if($JQuery(window).scrollTop() > 100) {
                    $JQuery(".BlocoMenuTotBg").addClass("ajusMenu");
                }else{
                    $JQuery(".BlocoMenuTotBg").removeClass("ajusMenu");
                }
            });
        });