Transition property not working when setting it through javascript-CodePudding

I have a language link, which opens up a vertical menu of language choice:

This is its html:

<div >
                <a href="" >eng</a>
                <ul >
                    <li><a href="" data-lang="eng" >eng</a></li>
                    <li><a href="" data-lang="ukr" >ukr</a></li>
                </ul>
            </div>

And CSS:

.lang-container {
    margin-top: .5em;
    background-color: white;
    border-radius: 15px;
    padding: .5em 0;
    position: absolute;
    top: 15px;
    transition: opacity 2s;
    display: none;
    opacity: 0;
}

I want this menu to pop up gradually, which means I want to gradually set the opacity from zero to one. I set the opacity from javascript code through click event (don't pay attention to multiple const_switchers, there are several of them on my page):

const lang_switchers = document.querySelectorAll('.lang-switcher');
lang_switchers.forEach((lang_switcher) => {
    const lang_container = lang_switcher.nextElementSibling;
    let container_is_shown = false;
    lang_switcher.addEventListener('click', (e) => {
        e.preventDefault();
        if(!container_is_shown) {
            lang_container.style.display = "block";
            lang_container.style.opacity = '1';
        }
        else {
            lang_container.style.opacity = '0';
            lang_container.style.display = "none";
        }
        container_is_shown = !container_is_shown;
    });
});

However, when I click the link, the menu immediately shows up, not gradually. Does this mean I cannot change opacity using transition through js? If no, is there a way to do it using css?

CodePudding user response：

Rather than setting lang_container.style.opacity = '1'; you can toggle a CSS class to the element to change its opacity.

You can create CSS class such as:

.lang-container-shown {
    opacity: 1;
}

Then you can then toggle this CSS class by calling

lang_container.classList.toggle("lang-container-shown");

Here is a working example:

const lang_switchers = document.querySelectorAll('.lang-switcher');
lang_switchers.forEach((lang_switcher) => {
    const lang_container = lang_switcher.nextElementSibling;
    lang_switcher.addEventListener('click', (e) => {
        e.preventDefault();
        lang_container.classList.toggle("lang-container-shown");
    });
});

.lang-container {
  margin-top: .5em;
  background-color: white;
  border-radius: 15px;
  padding: .5em 0;
  position: absolute;
  top: 15px;
  transition: opacity 2s;
  display: block;
  opacity: 0;
}

.lang-container-shown {
    opacity: 1;
}

<div >
  <a href="" >eng</a>
  <ul >
    <li><a href="" data-lang="eng" >eng</a></li>
    <li><a href="" data-lang="ukr" >ukr</a></li>
  </ul>
</div>

CodePudding user response：

Hey,

Try this code and also try to, `Run snippet` it definitely helps you

const seeMore = document.getElementById("seeMoreBtn");
    const article = document.getElementById("article");

    seeMore.addEventListener("click", () => {
        article.classList.toggle("expanded");

        const expanded = article.classList.contains("expanded");
        if (expanded) {
            seeMore.innerHTML = "See Less";
        } else {
            seeMore.innerHTML = "See More";
        }
    });

article {
        max-width: 800px;
        height: 300px;
        overflow-y: hidden;
    }

    /* This class is added when button is clicked */
    article.expanded {
        opacity:1;
    }

    button {
        height: 41px;
        padding: 0 2rem;
    }
    article {
        max-width: 800px;
      
        opacity:0;
        overflow-y: hidden;
        transition: opacity 0.4s linear;
    }

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<body>
scroll down:-_
    <article id="article">
        <h3>Why You Should Care about the Ipsum</h3>
        <p>Tart jelly beans croissant toffee oat cake soufflé gingerbread. Toffee powder cheesecake soufflé bonbon tiramisu toffee powder gummi bears. Toffee tootsie roll powder soufflé apple pie. Fruitcake fruitcake soufflé sweet oat cake cotton candy lemon drops biscuit. Chupa chups fruitcake dessert icing halvah oat cake. Lollipop candy canes halvah bonbon marshmallow croissant. Wafer chupa chups cotton candy tart pudding pie cupcake. Candy canes gummies macaroon pudding cupcake cupcake pudding jujubes. Donut halvah pie chocolate. Sugar plum dessert pudding icing jelly-o cake. Gingerbread macaroon wafer. Caramels muffin jelly wafer carrot cake.</p>

        <p>Marshmallow candy cookie danish cake. Cupcake croissant gummi bears pastry wafer. Macaroon croissant bonbon wafer. Topping fruitcake topping biscuit. Tiramisu powder sesame snaps candy. Dessert donut cookie carrot cake dragée muffin. Lollipop oat cake cookie candy canes fruitcake. Candy croissant candy canes croissant bear claw cake brownie biscuit pie. Liquorice wafer wafer cookie lollipop gingerbread chocolate cake oat cake dessert. Pudding gingerbread croissant cheesecake soufflé. Muffin gummies chocolate chocolate cupcake pastry. Sweet roll fruitcake bear claw sweet caramels lemon drops lemon drops.</p>

        <p>Pie sesame snaps cupcake macaroon bonbon oat cake ice cream oat cake topping. Brownie dessert toffee brownie jelly-o chocolate jujubes halvah chocolate bar. Pudding gingerbread dessert. Bear claw tiramisu gummies pudding. Toffee marshmallow jelly beans pie marzipan caramels ice cream lollipop powder. Dragée sesame snaps sugar plum. Marshmallow sweet roll croissant tootsie roll icing. Dragée chocolate marzipan jelly cotton candy. Jujubes sweet chocolate bar candy sweet roll lollipop biscuit dessert. Danish lollipop caramels toffee pastry. Wafer candy canes cupcake chupa chups gummies lemon drops jujubes powder. Caramels danish marshmallow gummies. Jujubes muffin danish pie icing brownie.</p>

        <p>Toffee sweet tiramisu topping. Cookie fruitcake icing jelly-o sesame snaps. Caramels gingerbread ice cream pastry donut. Gummies liquorice carrot cake sesame snaps muffin toffee dragée marzipan oat cake. Chocolate bar lemon drops dessert. Sweet cupcake sesame snaps carrot cake dessert candy canes halvah tart ice cream. Jelly donut chocolate bar chupa chups tootsie roll soufflé carrot cake tootsie roll gummi bears. Pastry jujubes soufflé marshmallow toffee. Macaroon marshmallow oat cake jujubes caramels topping marzipan cupcake icing. Brownie jelly sweet tootsie roll brownie jujubes cupcake pie. Cookie lollipop ice cream tiramisu jelly-o chocolate gummies. Tart biscuit tiramisu biscuit cake tart danish topping cookie. Liquorice donut dragée tart. Dragée soufflé pudding halvah cookie marshmallow jujubes sweet roll.</p>

        <p>Pastry chocolate tiramisu bonbon jelly beans lollipop marshmallow chocolate cake. Icing carrot cake gummies cheesecake dragée. Cake fruitcake gummies. Halvah jujubes toffee pudding bonbon soufflé brownie cupcake candy. Icing biscuit cake jujubes. Chocolate bar candy canes caramels cupcake. </p>
    </article>
    <button id="seeMoreBtn">See More</button>
</body>


</body>
</html>

Hey,

Try this code and also try to, Run snippet it definitely helps you

Try this code and also try to, `Run snippet` it definitely helps you