javascript - 如何在避免闪烁的同时平移元素？

Question

我有一个总共包含 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% 并离开悬停区域，这就是为什么试图回到原来的位置，但它再次进入悬停区域，这就是为什么再次平移并离开悬停区域，这就是为什么再次回来，这就是它如何进行连续的来回运动。那么，我能做些什么来解决这个...？

Answer 1

您可以在列表项周围添加一个 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>