Переход не работает (CSS & JS) переключить класс - PullRequest
Новая
       54

Переход не работает (CSS & JS) переключить класс

1 голос
/ 03 августа 2020

Я начал проект кликера, и теперь я хочу открыть категорию магазина (вверху слева).

Он работает с использованием некоторого класса переключения JS, но в основном CSS элемент скрипта переход не работает. Я говорю об элементе shop .

любая помощь будет очень признательна и полезна. 

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

Ответы [ 2 ]

2 голосов
/ 03 августа 2020

более простое решение: 

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

.shopOpenJS {
    width: 100vw !important;
}
2 голосов
/ 03 августа 2020

Вы не указали начальную ширину, поэтому свойство не будет анимировано.

подробнее о 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;
}
...