每当我切换类"dark_mode"width_animation"的边框颜色有一个过渡。有什么想法吗?我如何在不影响宽度过渡的情况下删除边界过渡?如果我移除类的过渡"width_animation"没有悬停后宽度会恢复到初始宽度我不想这样，我想要平滑。
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 class="product_container">
<div class="width_animation">
hover
</div>
</div>
<script src="script.js"></script>
</body>
</html>添加过渡的宽度。这将只适用于宽度的过渡。确保将其添加到两个部分中。见下文.
.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;
}
我可能读错了这个问题，但据我所知，你只是想要的边界"方块在暗模式下是红色的，对吧?此外，您只希望宽度转换在悬停时发生，并且两者应该是互斥的。对吗?
.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;
}
如果你想让"悬停"square在有人退出悬停动画后不会收缩(基于你的问题"the width will go back to initial width after no hover and i don't want that"的这一部分)，你需要使.width_animation:hover像下面这样的静态样式，然后使用一些javascript添加/删除悬停类。
.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");
}
})
.width_animation {
-webkit-transition: width 1s ease-in-out, border 0.1s linear;
transition: width 1s ease-in-out, border 0.1s linear;
}
并且您不必将transition写入scope of:hover{}。因为你的前进和后退转换是相同的。