Transition for Text on reset

Question

I tried to find a solution for this one but I can't. There s something that I keep missing... not sure what.

I have a project that when I click a image, the image will get an translate and also a text description. The text description has a smooth transition and it looks cool.

Well, the question is.. how to make the reset(click on body or another image) to have the same transition for that text description?

This is how it look right now: https://im3.ezgif.com/tmp/ezgif-3-5150d8ffbf.gif

function resetEnlargeEntityImage() {
    if(enlargedEntity != null) {
        enlargedEntity.style.transform = null;
        enlargedEntity.style.transition = null;

        enlargedEntity.classList.add("planet-svg-hover");

        document.getElementById("planets-description-paragraph").innerHTML = null;
        document.getElementById("planets-description-paragraph").classList.add("entity-description-js");
        document.getElementById("planets-description-paragraph").classList.remove("entity-description-appear-js");
    }
}



function enlargeEntityImage(clickedImage, clickedImageId) {
    let mediaQuery =  window.matchMedia('(max-width: 375px)');
    if(mediaQuery.matches) {
        window.location.href = `./${planetsName[clickedImageId]}.html`;
    } else {
        resetEnlargeEntityImage();

        var xToMove = 260 - 130 * clickedImageId; //260

        clickedImage.style.transform = "translate(" + xToMove + "px, 320px) scale(4.0)";
        clickedImage.style.transition = "transform 1s ease-in-out";

        clickedImage.classList.remove("planet-svg-hover");

        document.getElementById("planets-description-paragraph").innerHTML = descriptionSpaceObjects[clickedImageId];
        document.getElementById("planets-description-paragraph").classList.remove("entity-description-js");
        document.getElementById("planets-description-paragraph").classList.add("entity-description-appear-js");

        enlargedEntity = clickedImage;
    }
}

.planets-description {
    color: white;
    font-family: "Barlow";
    font-size: 30px;
    width: 600px;
    position: relative;
    top: 100px;
    left: 700px;
}

.entity-description-js {
    position: absolute;
    transition-delay: 1s;
    transition: 1s;
    width: 600px;
    left: 0;
    visibility: hidden;
    opacity: 0;
}

.entity-description-appear-js {
    position: absolute;
    transition: 1s;
    width: 600px;
    left: 100px;
    visibility: visible;
    opacity: 1;
}

<div class="planets-description">
        <p id="planets-description-paragraph" class="entity-description-js"></p>
    </div>

Answer 1

The Code you provided isnt showing anything, but maybe you could try uesing the "transition" property in css.