Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2022-07-25 11:42:54

Gallex
Member
Registered: 2006-10-08
Posts: 1,246

CSS transition

hi css gurus!

hover mouse over ‘‘TAPEEDID’‘ under product list ‘‘KATEGOORIAD’‘ – list will show up.
i use transition for list height:

.cat-2-text ul {
margin-bottom: 0;
padding-bottom:0;
height:0;
transition: height 0.5s;
}

.cat-2-text:hover ul{
height:100%;
}

but transition duration – 0.5s – not working that way. any ideas?

Offline

#2 2022-07-25 14:41:24

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,370
Website

Re: CSS transition

Try using max-height and set the expanded state to something way too big.

.cat-2-text {
    max-height: 38px;  /* your collapsed height */
    transition: max-height 0.25s ease-out;
}
.cat-2-text:hover {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

That appears to work in the dev tools.


TXP Builders – finely-crafted code, design and txp

Offline

#3 2022-07-26 09:31:30

Gallex
Member
Registered: 2006-10-08
Posts: 1,246

Re: CSS transition

jakob wrote #333737:

Try using max-height and set the expanded state to something way too big.

.cat-2-text {...

That appears to work in the dev tools.

that’s working indeed, thank’s jakob!

Offline

Board footer

Powered by FluxBB