JS / CSS onmouseover问题 - 闪烁(JS / CSS onmouseover issue - flickering)
当有人在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); }I am trying to get a nice Transition, when someone hovers over one of the 3 div containers. I am changing the classes with js, the classes on the other hand have a Transition or Animation.
You can look at the live version here: LINK
This is the HTML and Inline 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>These here are the relevant parts from the CSS file:
/*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*/Here the 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); }最满意答案
现在，您正试图模仿Twitter Bootstrap的网格系统原理，悬停时可变列宽。
你必须选择：
1. 做错了
你不应该在这里使用col-*系统，但作为一个练习，这里是你的JavaScript应遵循的逻辑，以实现这种效果：
在开始时使所有列相等（使它们成为col-4 ） 在mouseenter上使列更宽，而另外两列更窄（使所有col-3和hover一个col-6 ） 在mouseleave上使所有三列相等（make all col-4 ） 离开列并同时进入另一列时，确保mouseenter在mouseleave之后触发（在所有设备上） 使用A-Nice-Transition™为列的width属性设置动画作为5)替代，你可以使用jQuery的animate() ，但动画width可能会在资源有限的设备上产生不良结果，并且不能保证转换始终是平滑的。 使用CSS过渡更安全。
我只列出了上述解决方案的编程逻辑，而不是代码本身，因为我强烈反对这种方法。 如果你确定要这样，我可以提供它。
为什么我反对呢？ 因为通过CSS可以实现更清晰的相同结果......
2. 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似乎是不必要的，但是当内容长度不同时，它会保持列的宽度相同（否则它们会自我调整以最适合内容的显示）。
Right now you are trying to mimic Twitter Bootstrap's grid system's principle, with variable column widths on hover.
You have to options:
1. Doing-It-Wrong™
You shouldn't use col-* system here at all but, as an exercise, here is the logic your JavaScript should follow in order to achieve this effect:
make all your columns equal at start (make them col-4)
make column wider on mouseenter and the other two columns narrower (make all col-3 and hovered one col-6)
make all three columns equal on mouseleave (make all col-4)
when leaving a column and entering another at the same time, make sure mouseenter fires after the mouseleave (on all devices)
animate the width property of columns with A-Nice-Transition™
Alternatively to 5), you could use jQuery's animate(), but animating width might produce poor results on devices with limited resources and your transitions are not guaranteed to always be smooth. You're safer using CSS transitions.
I only listed the programming logic for the solution above and not the code itself because I strongly advise against this approach. If are sure you want to go this way, I can provide it.
Why do I advise against it? Because the same result can be achieved much cleaner through CSS...
2. flexbox to the rescue
It's faster, lighter on the browser and renders more smoothly on all devices. Besides, you don't need to worry about the order of JavaScript events.
If you're worried about browser-compat, it currently stands at 97.38% (prefixed). It has better support than box-hadow, which you seem to use quite a bit. Here's the code:
.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>
Note: the max-width might seem unnecessary, but it's there to keep columns same width when the contents differ in length (otherwise they would self-adjust to best fit the display of contents).
更多推荐
发布评论