如何阻止图像库中的过渡？

Question

我目前有一个图片库，如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&#39;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&#39;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&#39;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&#39;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&#39;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; 之间的更改有关，尽管目前尚未完全测试（可能还有其他我不知道的问题）。但据我所知，这可能是这里的问题。

---

Answer 1

试着做一个共同的过渡。检查这是否是您期望的输出Updated Fiddle。

* { -webkit-transition: all 0.6s ease-in-out; }