Transition doesn't work (CSS & JS) using classes toggling

Question

I started this very basic UI. I want to open the shop category (in the top-left corner) with a smooth transition.

I used an onClick() function in the HTML attributes for the shop-btn element that uses the shopOpen() function in the JS code. Seems like the Javascript code is ok, but the transition does not work in the CSS code.

let shopBtn = document.querySelector(".shop-btn");
let shop = document.querySelector(".shop");

function shopOpen() {
    shop.classList.toggle("shopOpenJS");
}

* {
  margin: 0;
  padding: 0;
  font-family: arial;
}

body {
  overflow: hidden;
}

.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*/

.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="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">
    </div>
  </div>

  <script src="main.js"></script>
</body>

</html>

Jannes Carpentier · Accepted Answer · 2020-08-03 13:49:41Z

3

You didn't specify a starting width, so the property won't be animated.

more about css specificity

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

answered Aug 3, 2020 at 13:49

Jannes Carpentier

2,0081 gold badge7 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MajiD · Accepted Answer · 2020-08-03 14:00:47Z

1

simpler solution :

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

.shopOpenJS {
    width: 100vw !important;
}

answered Aug 3, 2020 at 14:00

MajiD

2,6151 gold badge26 silver badges35 bronze badges

Collectives™ on Stack Overflow

Transition doesn't work (CSS & JS) using classes toggling

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related