文章/答案/技术大牛

发布

社区首页 >问答首页 >转换属性在通过javascript设置它时不起作用。

问转换属性在通过javascript设置它时不起作用。
EN

Stack Overflow用户

提问于 2022-10-20 02:00:39

回答 2查看 25关注 0票数 1

我有一个语言链接，它打开了一个垂直的语言选择菜单：

这是它的html：

<div class="header__lang-container _flex-column-center nav__item-container">
                <a href="" class="nav__simple-link header__lang lang-switcher">eng</a>
                <ul class="lang-container">
                    <li><a href="" data-lang="eng" class="lang-container__eng lang-container__item">eng</a></li>
                    <li><a href="" data-lang="ukr" class="lang-container__ukr lang-container__item">ukr</a></li>
                </ul>
            </div>

和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;
}

我希望这个菜单逐渐弹出，这意味着我想要逐步设置从0到1的不透明度。我通过单击事件设置了javascript代码的不透明度(不要注意多个const_switchers，页面上有几个)：

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;
    });
});

但是，当我单击该链接时，菜单会立即显示，而不是逐渐显示。这是否意味着我不能通过js使用转换来改变不透明度？如果没有，有什么方法可以使用css来完成吗？

javascript

css

onclick

css-transitions

opacity

回答 2

Stack Overflow用户

发布于 2022-10-20 02:37:32

与设置lang_container.style.opacity = '1';不同，您可以将CSS类切换到元素以更改其不透明度。

您可以创建CSS类，如：

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

然后，您可以通过调用

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

下面是一个有用的例子：

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 class="header__lang-container _flex-column-center nav__item-container">
  <a href="" class="nav__simple-link header__lang lang-switcher">eng</a>
  <ul class="lang-container">
    <li><a href="" data-lang="eng" class="lang-container__eng lang-container__item">eng</a></li>
    <li><a href="" data-lang="ukr" class="lang-container__ukr lang-container__item">ukr</a></li>
  </ul>
</div>

票数 1

Stack Overflow用户

发布于 2022-10-20 02:31:56

嘿,

试试这段代码，也尝试一下，Run snippet，它肯定对你有帮助。

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74133665

复制

相似问题

问转换属性在通过javascript设置它时不起作用。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问转换属性在通过javascript设置它时不起作用。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问转换属性在通过javascript设置它时不起作用。
EN