How to remove transition of a border without affecting the width-CodePudding

Whenever i toggle the class "dark_mode" the border color of the "width_animation" has a transition. Any ideas how could i remove the border transition without affecting the width transition? If i remove the transition of the class "width_animation" the width will go back to initial width after no hover and i don't want that, i want to be smooth.

function darkMode() {
    var element = document.body;
    element.classList.toggle("dark_mode");
}

.dark_mode {
  background-color: #333;
}

.dark_mode .width_animation {
  border-color: red;
}

.product_container {
  width: 300px;
  height: 400px;
  background-color: grey;
  position: relative;
}

.width_animation {
  width: 100px;
  height: auto;
  color: white;
  background-color: black;
  border: 5px solid white;
  font-size: 30px;
  padding-left: 10px;
  position: absolute;
  right: 0px;
  top: 150px;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}

.width_animation:hover {
  width: 200px;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button onclick="darkMode()">DARK MODE</button>

    <div >
        <div >
            hover
        </div>
    </div>

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

</html>

CodePudding user response：

Add width to the transition. This will apply transition to the width only. Make sure to add it to both sections. See below.

.width_animation {
  width: 100px;
  height: auto;
  color: white;
  background-color: black;
  border: 5px solid white;
  font-size: 30px;
  padding-left: 10px;
  position: absolute;
  right: 0px;
  top: 150px;
  -webkit-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

.width_animation:hover {
  width: 200px;
  -webkit-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
  cursor: pointer;
}

CodePudding user response：

I might be reading the question wrong, but as I understand it you only want the border of the "hover" square to be red when Dark Mode is enabled, right? Further, you only want the width transition to occur on-hover, and the two should be mutually exclusive. Is that right?

.width_animation {
  width: 100px;
  height: auto;
  color: white;
  background-color: black;
  border: 5px solid white;
  font-size: 30px;
  padding-left: 10px;
  position: absolute;
  right: 0px;
  top: 150px;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}

.dark_mode {
  background-color: #333;
}

/* The width_animation color transition will only apply when 
   the parent object has dark_mode enabled */
.dark_mode > .product_container > .width_animation {
  border-color: red;
}

.product_container {
  width: 300px;
  height: 400px;
  background-color: grey;
  position: relative;
}

.width_animation:hover {
  width: 200px;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  cursor: pointer;
}

If you wanted to make it so that the "hover" square doesn't shrink after someone exits the hover animation (based on this part of your question "the width will go back to initial width after no hover and i don't want that"), you'll need to make .width_animation:hover a static style like below, and then use some javascript to add/remove the class on hover as desired.

.width_animation {
  width: 100px;
  height: auto;
  color: white;
  background-color: black;
  border: 5px solid white;
  font-size: 30px;
  padding-left: 10px;
  position: absolute;
  right: 0px;
  top: 150px;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}

.dark_mode {
  background-color: #333;
}

/* The width_animation color transition will only apply when 
   the parent object has dark_mode enabled */
.dark_mode > .product_container > .width_animation {
  border-color: red;
}

.product_container {
  width: 300px;
  height: 400px;
  background-color: grey;
  position: relative;
}

.width_animation_hover {
  width: 200px;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  cursor: pointer;
}

function darkMode() {
  var element = document.body;
  element.classList.toggle("dark_mode");
}

var hover = document.getElementsByClassName("width_animation")[0];
hover.addEventListener("mouseenter", function( event ) {
    if ( hover.classList.contains("width_animation_hover") ) {
    event.target.classList.remove("width_animation_hover");
  } else {
    event.target.classList.add("width_animation_hover");
  }
})