Autohide address bar transition



  • Hello.

    I'm trying to covert the auto-hide address bar to make it a uniform transition with my tab bar and panels bar (also auto-hidden) but I'm kind of stuck. Just now it's using opacity and hidden, I'd like it to use height (so it appears to pop in from the top) and I can make the whole bar do that, except the contents of the bar remain behind.

    .toolbar-addressbar {
        position: fixed;
        width: 100%;
        z-index: 2;
        padding-left: 34px;
        padding-right: 34px;
    /** height: 0px; 
        transition: height 0.2s; **/
        visibility: hidden;
        opacity: 0;
        transition: opacity .2s linear .2s, visibility 0s linear .2s;
    }
    
    #header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }
    
    /** #header:hover .toolbar-addressbar, #header.hover .toolbar-addressbar {
        height: 34px;
    } **/
    

    The parts in comments are what I tried, and gave the results I described. Any pointers?



  • Use transform: translate() instead of height transitions.
    Give higher z-index to header so that adressbar slides from underneath it.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.