当有人在3个div容器中的一个上盘旋时，我正试图获得一个很好的转换。我正在使用js更改类，另一方面，类具有Transition或Animation。
您可以在此处查看实时版本：LINK
这是HTML和内联Javascript：
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="style.css">
<title>Schwarz & Torf Maler AG</title>
</head>
<body>
<div class="col-12 header_div">
<h1 class="col-12 header_title">Schwarz & Torf Maler AG</h1>
<h3 class="col-12 header_subtitle">Wir Malen wo andere nur zuschauen</h3>
</div>
<div class="col-2"></div>
<div class="col-2" id="content_1" onmouseover="mouseOver('content_1', 'content_2', 'content_3')" onmouseout="mouseOut('content_1', 'content_2', 'content_3')">
<div class="content_area content_col_1 shadowbox_red">
<div class="content_title">
<h2>Palette</h2>
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col-2" id="content_2" onmouseover="mouseOver('content_2', 'content_1', 'content_3')" onmouseout="mouseOut('content_2', 'content_1', 'content_3')">
<div class="content_area content_col_2 shadowbox_blue">
<div class="content_title">
<h2>Offerte</h2>
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col-2" id="content_3" onmouseover="mouseOver('content_3', 'content_1', 'content_2')" onmouseout="mouseOut('content_3', 'content_1', 'content_2')">
<div class="content_area content_col_3 shadowbox_green">
<div class="content_title">
<h2>Vor Ort</h2>
</div>
</div>
</div>
<div class="col-2"></div>
<script>
function mouseOver(content, content_reduce1, content_reduce2) {
console.log(content + " selected");
console.log(document.getElementById(content));
document.getElementById(content).setAttribute("class", "col-5-trans");
document.getElementById(content_reduce1).setAttribute("class", "col-0");
document.getElementById(content_reduce2).setAttribute("class", "col-0");
}
function mouseOut(content, content_reset1, content_reset2) {
console.log(content + " deselected");
setInterval(function(){
document.getElementById(content).setAttribute("class", "col-2");
document.getElementById(content_reset1).setAttribute("class", "col-2");
document.getElementById(content_reset2).setAttribute("class", "col-2");
},2000);
}
</script>
</body>
</html>
以下是CSS文件中的相关部分：
/*GRID_COLUMNS*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: left;
padding: 15px;
}
.row::after {
content: "";
clear: both;
display: table;
}
.col-0 {
width: 8.33%;
animation-name: col-0-anim;
animation-duration: 2s;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-out; /* Safari 4.0 - 8.0 */
animation-timing-function: ease-out;
}
@keyframes col-0-anim {
0% {
width: 8.33%;
}
100% {
width: 0%;
}
}
.col-5-trans {
width: 16.66%;
-webkit-transition: width 2s ease-out; /* Safari */
transition: width 2s ease-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.col-5-trans:hover {
width: 41.66%;
}
/*END GRID_COLUMNS*/
此处为CONTENT Area CSS：
/*CONTENT AREA*/
.content_area {
height: 500px;
background-color: rgba(40, 40, 40, 1);
border: 2px solid white;
border-radius: 10px;
background-image: url("images/background_exp.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.content_area .content_title {
position: relative;
overflow: visible;
height: 100%;
width: 45%;
float: right;
}
.content_area h2 {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding-left: 20px;
width: 100px;
color: rgba(255, 255, 255, .9);
white-space: nowrap;
letter-spacing: 1px;
font-size: 5em;
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
}
答案 0 :(得分：2)
现在你正试图模仿Twitter Bootstrap的网格系统的原理，悬停时可变列宽。
你必须选择：
你不应该在这里使用col-*系统，但作为练习，这是你的JavaScript应该遵循的逻辑，以达到这个效果：
col-4）mouseenter上的列更宽，而其他两列更窄（使所有col-3并且只剩下一个col-6）mouseleave（使所有col-4）mouseenter在mouseleave之后（在所有设备上）width属性设置动画
除5)之外，您可以使用jQuery的animate()，但动画width可能会在资源有限的设备上产生不良结果，并且无法确保您的过渡始终保持平滑。使用CSS过渡更安全。
我只列出了上述解决方案的编程逻辑，而不是代码本身，因为我强烈建议反对这种方法。如果你确定要这样，我可以提供它。
为什么我建议反对呢？因为通过CSS可以实现更清晰的相同结果...
flexbox救援它在浏览器上更快，更轻，并且可以在所有设备上更流畅地呈现。此外，您无需担心JavaScript事件的顺序。
如果您担心浏览器兼容，它目前位于97.38%（前缀）。它比box-hadow有更好的支持，你似乎使用了很多
这是代码：
.roW {
margin:1rem auto;
/* change to desired height */
min-height:calc(100vh - 2rem);
/* don't forget to prefix all CSS at https://autoprefixer.github.io/ */
display: flex;
align-items: stretch;
justify-content: center;
}
.columN {
background-color: #999;
flex: 1 1 auto;
margin: 1rem;
max-width: 33%;
/* A-Nice-Transition™ */
transition: flex-grow .5s cubic-bezier(.4, 0, .2,1), max-width .5s cubic-bezier(.4, 0, .2,1);
}
.columN:hover {
/* change to make hovered columns wider */
flex-grow: 2;
max-width: 50%;
}<div class="roW">
<div class="columN"></div>
<div class="columN"></div>
<div class="columN"></div>
</div>
注意： max-width似乎没必要，但是当内容的长度不同时，它会保持列的宽度相同（否则它们会自我调整以最适合内容的显示）。
答案 1 :(得分：1)
您不必在此处使用JavaScript。只有CSS的解决方案适用于您的情况：
.container {
display: flex;
justify-content: space-between;
}
.col {
width: 20%;
height: 200px;
background: orange;
transition: all 1s ease-in-out;
}
.col:hover {
width: 30%;
}<div class="container">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
我建议你不要使用浮动元素，将cols放在容器中，并使用flexbox将它们完美地并排放置。
如果你想保持每个元素的位置悬停，并使列不那么宽，你可以这样做：
.container {
position: relative;
}
.col {
display: inline-block;
width: 20%;
height: 200px;
background: orange;
position: absolute;
top: 0;
left: 0;
transition: all 1s ease-in-out;
}
.col:nth-child(2) {
left: 50%;
transform: translate3d(-50%,0,0);
}
.col:last-child {
top: 0;
right: 0;
left: initial; // Reset left
}
.col:hover {
width: 30%;
}<div class="container">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>