css - 过渡和变换行为仅适用于第一次

Question

我有一个简单的 HTML CSS 页面，其中有 10 个圆圈，当我将鼠标悬停在一个圆圈上时，它会移动到页面右侧并显示上面写的数字。一切都由 CSS transition 完成和 transform属性。

trasition 仅适用于第一个圆圈悬停且仅一次(即使在 codepen 和 SO 内置代码面板中表现不同)之后，如果我们悬停到下一个圆圈，它会继续变换但不会在给定间隔后停留。

它有时只对偶数圈起作用，有时对所有圈都起作用。

问题是什么以及如何解决？

* {
    margin: 0;
    padding: 0;
}
:root {
    --bg-color: #454678;
    --color__1: salmon;
    --color__2: lightskyblue;
    --color__3: khaki;
    --color__4: thistle;
    --color__5: mediumturquoise;
}

body {
    background-color: indianred;
}

.container {
    display: -ms-grid;
    display: grid;
    grid-template-rows: 2em auto;
    grid-template-columns: auto;
    grid-template-areas:
        "header"
        "main";
    grid-gap: 2px;
    background-color: white;
    justify-content: safe left;
    align-content: center;
}

header {
    grid-area: header;
}
main {
    display: grid;
    grid-area: main;
    grid-template-columns: auto;
    grid-template-rows: repeat(8, 1fr);
    grid-gap: 10px;
    justify-items: start;
    align-content: center;
    padding: 10px;
}

.circle {
    height: 2em;
    width: 2em;
    border-radius: 50%;
    background-color: var(--color__3, khaki);
    transition: all 1.5s ease-in-out;
    padding: 1em;
    margin: 0 10em;
    display: grid;
    align-items: center;
    justify-items: center;
    color: transparent;
    font-size: 10px;
}

.circle:nth-child(even) {
    background-color: var(--color__1);
}

.circle:hover {
    -webkit-transform: translateX(100%);
    transform: scale(2) translateX(50em);
    background-color: var(--color__5, salmon);
    color: white;
}

<div class="container">
        <header>Press any Number</header>
        <main>
            <div class="circle">1</div>
            <div class="circle">2</div>
            <div class="circle">3</div>
            <div class="circle">4</div>
            <div class="circle">5</div>
            <div class="circle">6</div>
            <div class="circle">7</div>
            <div class="circle">8</div>
        </main>
    </div>

注意:我只检查最新的 chrome。

Answer 1

问题是圆圈向右移动后没有悬停。一个可能的解决方案是将它放在一个容器中，该容器随圆圈一起拉伸(stretch)并将悬停事件绑定(bind)到该容器，请参见下文。

* {
    margin: 0;
    padding: 0;
}
:root {
    --bg-color: #454678;
    --color__1: salmon;
    --color__2: lightskyblue;
    --color__3: khaki;
    --color__4: thistle;
    --color__5: mediumturquoise;
}

body {
    background-color: indianred;
}

.container {
    display: -ms-grid;
    display: grid;
    grid-template-rows: 2em auto;
    grid-template-columns: auto;
    grid-template-areas:
        "header"
        "main";
    grid-gap: 2px;
    background-color: white;
    justify-content: safe left;
    align-content: center;
}

header {
    grid-area: header;
}
main {
    display: grid;
    grid-area: main;
    grid-template-columns: auto;
    grid-template-rows: repeat(8, 1fr);
    grid-gap: 10px;
    justify-items: start;
    align-content: center;
    padding: 10px;
}

.circle {
    height: 2em;
    width: 2em;
    border-radius: 50%;
    background-color: var(--color__3, khaki);
    transition: all 1.5s ease-in-out;
    padding: 1em;
    margin: 0 10em;
    display: grid;
    align-items: center;
    justify-items: center;
    color: transparent;
    font-size: 10px;
}

.circle:nth-child(even) {
    background-color: var(--color__1);
}

.outer:hover .circle {
    -webkit-transform: translateX(100%);
    transform: scale(2) translateX(50em);
    background-color: var(--color__5, salmon);
    color: white;
}

<div class="container">
        <header>Press any Number</header>
        <main>
            <div class="outer"><div class="circle">1</div></div>
            <div class="outer"><div class="circle">2</div></div>
            <div class="outer"><div class="circle">3</div></div>
            <div class="outer"><div class="circle">4</div></div>
            <div class="outer"><div class="circle">5</div></div>
            <div class="outer"><div class="circle">6</div></div>
            <div class="outer"><div class="circle">7</div></div>
            <div class="outer"><div class="circle">8</div></div>
        </main>
    </div>