我目前有一个图片库，如fiddle所示，但由于某些原因，在打开和关闭图片时它非常“跳跃”。
我尝试过使用
transform:translateZ(0);
建议here但它似乎没有帮助减少这种“滞后”的动画。
有没有我可能错过/做得非常糟糕的事情，这会引起一个问题？
注意： html标记的洪流是重复标记，因此没有太多担心。这与我认为导致问题的'imagewrap'css类有关。
$(document).ready(function () {
$('.imagewrap').click(function () {
$('.imagewrap').not(this).removeClass("active");
$(this).toggleClass("active");
});
});html {
margin:0;
padding:0;
height:100vh;
background:#222;
color: cornflowerblue;
overflow-x:hidden;
font-size:18px;
}
.aboutLink {
display:inline-block;
position:relative;
width:70%;
margin:5%;
padding:5%;
background:rgba(0, 0, 0, 0.2);
box-shadow:-8px 8px 20px 2px rgba(0, 0, 0, 1);
border:3px double gray;
}
.aboutLink:hover{
background:rgba(128,128,128,0.2);
}
.aboutLink a{
color:lime;
}
/*********************Image Gallery************/
.gallery{
position:absolute;
top:275px;
left:0;
height:100%;
width:100%;
}
.imagewrap {
width:150px;
height:150px;
background:#222;
text-align:center;
display:inline-block;
overflow:hidden;
padding-left:2%;
padding-top:2%;
padding-right:2%;
margin:2%;
transition:all 0.6s;
transform:translateZ(0);
vertical-align:top;
}
.imagewrap img {
max-width:100%;
max-height:100%;
transition:all 0.2s;
z-index:-1;
}
.imagewrap .description {
position:absolute;
bottom:0;
left:0;
opacity:0;
background:rgba(0, 0, 0, 0.8);
transition:all 0.6s;
height:30%;
width:100%;
}
.imagewrap:hover .description {
opacity:1;
position:absolute;
bottom:0;
overflow:hidden;
}
.imagewrap:hover {
background:#222;
}
.active {
position:absolute;
top:0;
left:0;
height:50vh;
width:90vw;
z-index:8;
}
.active .description {
opacity:1;
}
.description a, .tut a{
color:lime;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
<div class="imagewrap aboutLink">
<img src="http://fc02.deviantart.net/fs70/f/2012/151/c/c/facebook_black_3d_logo_by_magicmode-d51sg9p.png" />
<div class="description">www.facebook.com/jbutler483
<br />
Everyone Likes Facebook, Don't they?
<a href="/Photos/Edit/1">Edit</a><a href="/Photos/Details/1">Details</a><a href="/Photos/Delete/1">Delete</a> </div>
</div>
<div class="imagewrap aboutLink">
<img src="http://4.bp.blogspot.com/-dVfDVhcrG3g/Tfg61FFhi9I/AAAAAAAAACM/ZAROfbI8EGg/s1600/3324.jpg" />
<div class="description">Use the Latest Browsers...
<br />
If you're using Internet Explorer (especially IE8), you should really come into the 21st Century and Use a browser like Google Chrome.
<a href="/Photos/Edit/2">Edit</a><a href="/Photos/Details/2">Details</a><a href="/Photos/Delete/2">Delete</a> </div>
</div>
<div class="imagewrap aboutLink">
<img src="http://4.bp.blogspot.com/-M6TnqWS2ri8/TxbR1KHGBvI/AAAAAAAAAKs/qZq44n7uBrg/s1600/wiki.PNG" />
<div class="description">Wikipedia FTW!
<br />
Everyone has used Wikipedia at one point or another. It's a great resource and you might want to keep an eye on their latest stuff!
<a href="/Photos/Edit/3">Edit</a><a href="/Photos/Details/3">Details</a><a href="/Photos/Delete/3">Delete</a> </div>
</div>
<div class="imagewrap aboutLink">
<img src="http://www.talentsquare.com/wp-content/uploads/2015/02/Stackoverflow-logo-3.png" />
<div class="description">Stack Overflow
<br />
If you're any sort of programmer, you might want to take a look at Stack Overflow - Their community is a great knowledge base and are more than helpful... provided you've at least tried something before posting!
<a href="/Photos/Edit/4">Edit</a><a href="/Photos/Details/4">Details</a><a href="/Photos/Delete/4">Delete</a> </div>
</div>
<div class="imagewrap aboutLink">
<img src="http://placekitten.com/g/300/300" />
<div class="description">Kitten Image
<br />
This is just a kitten
<a href="/Photos/Edit/5">Edit</a><a href="/Photos/Details/5">Details</a><a href="/Photos/Delete/5">Delete</a> </div>
</div>
<div class="imagewrap aboutLink">
<img src="http://placekitten.com/g/300/200" />
<div class="description">Just another of those Kitten Images
<br />
Just another Kitten
<a href="/Photos/Edit/6">Edit</a><a href="/Photos/Details/6">Details</a><a href="/Photos/Delete/6">Delete</a> </div>
</div>
<div class="imagewrap aboutLink">
<img src="http://blog.codepen.io/wp-content/uploads/2012/06/Black-Large.png" />
<div class="description">Codepen.io
<br />
Codepen Is one of those websites that you can make a great showcase for your designs..
<a href="/Photos/Edit/7">Edit</a><a href="/Photos/Details/7">Details</a><a href="/Photos/Delete/7">Delete</a> </div>
</div>
</div>
我认为它可能与position:relative和position:absolute;之间的更改有关，尽管尚未对此进行全面测试（可能还有其他我不知道的问题）。但据我所知，这可能是问题所在。
答案 0 :(得分：0)
尝试进行共同转换。检查这是否是您期望Updated Fiddle的输出。
* { -webkit-transition: all 0.6s ease-in-out; }