转换不起作用（CSS 和 JS）切换 class

Question

I started a clicker project, and now I want to open the shop category (top-left).我开始了一个答题器项目，现在我想打开商店类别（左上角）。

It works using some JS toggle class, but in the main CSS element script the transition wont work.它使用一些JS切换 class 工作，但在主 CSS 元素脚本中，转换不起作用。 I'm talking about the element shop .我说的是元素店。

any help would be very appreciated and helpful.任何帮助将不胜感激和乐于助人。

 let cookie = document.querySelector(".cookie-btn"); let extraChocolate = document.querySelector(".extraChocolate"); let smallCandies = document.querySelector(".smallCandies"); let bigCandies = document.querySelector(".bigCandies"); let counter = document.querySelector(".counter"); let cookies = 0; function cookieDown() { cookie.classList.toggle("cookie-down-css"); extraChocolate.classList.toggle("cookie-down-css"); smallCandies.classList.toggle("cookie-down-css"); bigCandies.classList.toggle("cookie-down-css"); cookies++; counter.innerHTML = "Cookies: " + cookies; } function cookieUp() { cookie.classList.toggle("cookie-down-css"); extraChocolate.classList.toggle("cookie-down-css"); smallCandies.classList.toggle("cookie-down-css"); bigCandies.classList.toggle("cookie-down-css"); } let shopBtn = document.querySelector(".shop-btn"); let shop = document.querySelector(".shop"); function shopOpen() { shop.classList.toggle("shopOpenJS"); }

 * { margin: 0; padding: 0; font-family: arial; user-select: none; } body { overflow: hidden; }.counter { font-size: 50px; text-align: center; }.con-cookie-btn img { width: 50vh; height: 50vh; position: absolute; top: 25vh; left: calc((100vw - 50vh) / 2); border-radius: 500px; }.extraChocolate, .smallCandies, .bigCandies { display: none; }.menu { height: 100vh; position: absolute; top: 0; left: 0; }.menu.shop-btn, .menu.settings-btn { width: 5vw; }.menu.con-shop-btn, .menu.con-settings-btn { height: 50vh; padding: 0 1.3vw; display: flex; align-items: center; }.menu.con-shop-btn { position: absolute; top: 0; left: 0; background-color: #875a34; }.menu.shop { height: 100vh; position: relative; top: 0; right: calc(100vw - 100vw - 5vw - 1.3vw - 1.3vw); background-color: #875a34; transition: all 1s; }.menu.con-settings-btn { position: absolute; bottom: 0; left: 0; background-color: #ffffb3; } /*JS Classes*/.display { display: block; }.cookie-down-css { transform: scale(.95) }.shopOpenJS { width: calc(100vw - 5vw - 1.3vw - 1.3vw); }

 <.DOCTYPE html> <html> <head> <link type="text/css" href="style:css" rel="stylesheet"> <title></title> </head> <body> <div class="con-counter"> <p class="counter">Cookies. 0</p> </div> <div class="con-cookie-btn"> <img class="cookie-btn" src="images/cookie/cookie.png" alt="Cookie" onmousedown="cookieDown()" onmouseup="cookieUp()"></img> </div> <div class="menu"> <div class="con-shop-btn"> <img src="images/shop/shop.png" alt="Shop" class="shop-btn" onclick="shopOpen()"> </div> <div class="shop"></div> <div class="con-settings-btn"> <img src="images/settings.png" alt="Settings" class="settings-btn" onclick="settingsOpen()"> </div> </div> <script src="main.js"></script> </body> </html>

Answer 1

You didn't specify a starting width, so the property won't be animated.您没有指定起始宽度，因此不会为该属性设置动画。

more about css specificity更多关于 css 特异性

.menu .shop{
    height: 100vh;
    position: relative;
    top: 0;
    right: calc(100vw - 100vw - 5vw - 1.3vw - 1.3vw);
    width: 0; /* ADD THIS LINE */
    background-color: #875a34;
    transition: all 1s;
}

.shopOpenJS{
    /* Also need to add !important because .menu .shop is more specific than .shopOpenJS */
    width: calc(100vw - 5vw - 1.3vw - 1.3vw) !important;
}

Answer 2

simpler solution:更简单的解决方案：

.menu .shop {
    width: 0;
    height: 100vh;
    background-color: #875a34;
    transition: all 1s;
}

.shopOpenJS {
    width: 100vw !important;
}

转换不起作用（CSS 和 JS）切换 class

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-08-03 13:49:41

解决方案2
1 2020-08-03 14:00:47

转换不起作用（CSS 和 JS）切换 class

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-08-03 13:49:41

解决方案2 1 2020-08-03 14:00:47

解决方案1
2 已采纳 2020-08-03 13:49:41

解决方案2
1 2020-08-03 14:00:47