轉換不起作用（CSS 和 JS）切換 class
[英]Transition won't work (CSS & JS) toggle class
問題描述
我開始了一個答題器項目，現在我想打開商店類別（左上角）。
它使用一些JS切換 class 工作，但在主 CSS 元素腳本中，轉換不起作用。 我說的是元素店。
任何幫助將不勝感激和樂於助人。
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>
2 個解決方案
解決方案1
2 已采納 2020-08-03 13:49:41
您沒有指定起始寬度，因此不會為該屬性設置動畫。
.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;
}
解決方案2
1 2020-08-03 14:00:47
更簡單的解決方案：
.menu .shop {
width: 0;
height: 100vh;
background-color: #875a34;
transition: all 1s;
}
.shopOpenJS {
width: 100vw !important;
}
CSS 不透明度過渡不適用於 Safari
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.