Textpattern CMS

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

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

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?

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

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,595

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

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

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

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!