Problem with the transition on CSS set by JS

Question

I'm building a website to learn the interaction between CSS and HTML, but, I have a problem with this: "page with problem".

The div on the right would do a transition to the bottom and this translation must be a second long, but, it's a lot faster.

I don't understand the problem.

function setDescription(eventId) {
    var curEv = getEventById(eventId);

    var didascalia = document.getElementById("didascalia");
    didascalia.firstChild.data = curEv.titolo;

    var eventDescription = document.getElementById("eventDescription");
    if (eventDescription.firstChild) eventDescription.firstChild.data = curEv.descrizione;
    else eventDescription.appendChild(document.createTextNode(curEv.descrizione));

    var image = document.getElementById("imageEventImmagine");
    if (image) {
        if (image.alt === curEv.tipologia) return;
        image.src = "./resource/img/eventi/" + curEv.tipologia + ".jpg";
        image.alt = curEv.tipologia;
    } else {
        var divImmagine = document.getElementById("divImmagine");
        var img = document.createElement("img");
        img.id = "imageEventImmagine";
        img.src = "./resource/img/eventi/" + curEv.tipologia + ".jpg";
        img.alt = curEv.tipologia;
        divImmagine.appendChild(img);
    }
}

.smalldesc {
    overflow: hidden;
    transition: all .10s ease;
}

.smalldesc.expand {
    max-height:  100%;
}

<div id="expand" class="basePreventivo smalldesc">
    <h3 id="didascalia">Seleziona un'evento</h3>
    <p id="eventDescription"></p>
    <div id="divImmagine" class="fill"></div>
</div>

vioxii · Accepted Answer · 2020-12-24 00:49:54Z

1

transition: all .10s ease;

Change .10s to 1s to make the transition longer. Also

answered Dec 24, 2020 at 0:49

vioxii

261 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Shivam Shukla · Accepted Answer · 2020-12-24 00:04:38Z

1

Transition time is given .10s in CSS, change that to 1s to make it longer.

answered Dec 24, 2020 at 0:04

Shivam Shukla

751 silver badge11 bronze badges

Comments

cam · Accepted Answer · 2020-12-24 00:09:08Z

1

Your problem is that height (or max-height) can only be transitioned if it is transitioning between two literal values (no percentage or auto).

For example:

0px to 100px - ✅
0px to 10rem - ✅
auto to 100px - 🚫
0px to auto - 🚫
0px to 100% - 🚫

Additionally, if you want your transition to take 1 second you will need to adjust your transition timing from 0.1s to 1s.

To solve your animation value issues - check out this article that discusses several approaches to achieve what you need: Using CSS Transitions on Auto Dimensions

answered Dec 24, 2020 at 0:09

cam

3,7301 gold badge16 silver badges20 bronze badges

Collectives™ on Stack Overflow

Problem with the transition on CSS set by JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related