我开始了一个点击器项目，现在我想打开商店类别（左上角）。
使用一些JS toggle类可以工作，但是在主CSS元素脚本中转换不能工作。 我说的是元素商店。
任何帮助都将是非常感激和有益的。
null
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>null
您没有指定起始宽度，因此该属性将不显示动画。
有关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;
}
更简单的解决方案:
.menu .shop {
width: 0;
height: 100vh;
background-color: #875a34;
transition: all 1s;
}
.shopOpenJS {
width: 100vw !important;
}
