How to use the Transition effect on a display?

Asked

Viewed 235 times

0

Good morning, all right?

I’m trying, but I still can’t use the effect Transition to smooth the exchange of display:block for display:none and virse and versa.

I’m using JS to when the user scrolls the page apply the display:none, but this is happening kind of fast, wanted it to happen slower to leave a more natural effect, someone could 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 wordpress css3 css-transitions

  • Face there is no "half display" vc does not get this transition smoothly, in the case of the display is type Yes or No. To do this you either have to use Opacity, so you can make a smooth transition

1 answer

0

In case someone needs it, it’s not what you need but it’s better than it was 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");
                }
            });
        });

Browser other questions tagged css wordpress css3 css-transitions

You are not signed in. Login or sign up in order to post.