如何在避免閃爍的同時翻譯元素？

我有一個總共有 5 個元素的串列，在懸停時，在任何單個元素上，我試圖將該元素在 x 方向上轉換 7%，在 y 方向上轉換 -15%，時間為半秒過渡。到這里為止一切都很好。

這是代碼：

.listContainer{
    background-color:rgba(0,151, 19, 0.1);
    width: 70vw;
    margin: 0 auto;
    margin-top: 5vh;
    padding: 4vh;
}

.listItem{
    background-color:rgba(0,151, 19, 0.2);
    display: grid;
    grid-template-columns: 2fr 6fr 1fr;
    margin-top: 4vh;
    justify-content: row;
    transition: transform 0.5s;
}

.listItem:hover{
    transform : translate(7%, -15%);
    background-color: white;
}

.itemRank{
    text-align: center;
    color: rgb(183 225 188);
    /* border: 2px solid blue; */

}

.listHeading{
    text-align: center;
}

.listImg{
    border: 3px solid red;
}

<div class="listContainer">
        <div class="listHeading"><h1>Lorem, ipsum dolor.</h1></div>
        <div id="listItem1" class="listItem">
            <div class="listImg"></div>
            <div class="listText"><h2>this is item 1</h2></div>
            <div class="itemRank"><h2>#1</h2></div>
        </div>
        <div id="listItem2" class="listItem">
            <div class="listImg"></div>
            <div class="listText"><h2>this is heading 2</h2></div>
            <div class="itemRank"><h2>#2</h2></div>
        </div>
        <div id="listItem3" class="listItem">
            <div class="listImg"></div>
            <div class="listText"><h2>this is heading 3</h2></div>
            <div class="itemRank"><h2>#3</h2></div>
        </div>
        <div id="listItem4" class="listItem">
            <div class="listImg"></div>
            <div class="listText"><h2>this is heading 4</h2></div>
            <div class="itemRank"><h2>#4</h2></div>
        </div>
        <div id="listItem5" class="listItem">
            <div class="listImg"></div>
            <div class="listText"><h2>this is heading 5</h2></div>
            <div class="itemRank"><h2>#5</h2></div>
        </div>
    </div>

但是這里的問題是，假設您在 x 方向上的前 7% 元素之間懸停，如圖所示，然后元素在 x 方向上平移 7% 并離開懸停區域，這就是為什么嘗試來回到原來的位置，但它再次進入懸停區域，這就是為什么再次平移并離開懸停區域的原因，這就是為什么再次回傳，這就是它如何以連續的來回運動進行。那么，我能做些什么來解決這個問題......？

uj5u.com熱心網友回復：

您可以在串列項周圍添加一個 div 并使用它來附加懸停類。這將避免您看到的閃爍。

看看下面的代碼

.listContainer{
    background-color:rgba(0,151, 19, 0.1);
    width: 70vw;
    margin: 0 auto;
    margin-top: 5vh;
    padding: 4vh;
}

.listItem{
    background-color:rgba(0,151, 19, 0.2);
    display: grid;
    grid-template-columns: 2fr 6fr 1fr;
    margin-top: 4vh;
    justify-content: row;
    transition: transform 0.5s;
}

/** new change **/
.listItemWrapper:hover .listItem{
    transform : translate(7%, -15%);
    background-color: white;
}

.itemRank{
    text-align: center;
    color: rgb(183 225 188);
    /* border: 2px solid blue; */

}

.listHeading{
    text-align: center;
}

.listImg{
    border: 3px solid red;
}

<div class="listContainer">
<div class="listHeading">
    <h1>Lorem, ipsum dolor.</h1>
</div>

<div class="listItemWrapper"> <!-- Notice this wrapper -->
    <div id="listItem1" class="listItem">
        <div class="listImg"></div>
        <div class="listText">
            <h2>this is item 1</h2>
        </div>
        <div class="itemRank">
            <h2>#1</h2>
        </div>
    </div>
</div>
<div class="listItemWrapper">
    <div id="listItem2" class="listItem">
        <div class="listImg"></div>
        <div class="listText">
            <h2>this is heading 2</h2>
        </div>
        <div class="itemRank">
            <h2>#2</h2>
        </div>
    </div>
</div>
<div class="listItemWrapper">
    <div id="listItem3" class="listItem">
        <div class="listImg"></div>
        <div class="listText">
            <h2>this is heading 3</h2>
        </div>
        <div class="itemRank">
            <h2>#3</h2>
        </div>
    </div>
</div>
<div class="listItemWrapper">
    <div id="listItem4" class="listItem">
        <div class="listImg"></div>
        <div class="listText">
            <h2>this is heading 4</h2>
        </div>
        <div class="itemRank">
            <h2>#4</h2>
        </div>
    </div>
</div>
<div class="listItemWrapper">
    <div id="listItem5" class="listItem">
        <div class="listImg"></div>
        <div class="listText">
            <h2>this is heading 5</h2>
        </div>
        <div class="itemRank">
            <h2>#5</h2>
        </div>
    </div>
</div>
</div>

標籤：javascript html jQuery css

上一篇：自定義使用效果比較器：ReactJS

下一篇：在ngOnInit中設定CSSId屬性在瀏覽器中不起作用