代码之家 › 专栏 › 技术社区 › xkeshav

转换和转换行为第一次只工作一次

css-transitions css

xkeshav · 技术社区 · 6 年前

我有一个简单的html css页面,其中有10个圆圈,当我停留在一个圆圈上时,它会移动到页面的右侧,并显示上面写的数字。 CSS transition 和 transform 财产。

traposition只适用于第一个圆的悬停,并且只有一次(即使在代码笔中,所以内置的代码面板的行为也不同),然后,如果我们悬停到下一个圆,它会继续变换,但不会在给定的间隔后停留。

它的行为有时只适用于偶数圆,有时适用于所有圆。

问题是什么,如何解决?

* {
    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>

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

1 回复 | 直到 6 年前

Carle B. Navy 6 年前

问题是,当圆向右移动时,它不会悬停。一个可能的解决方案是将其放在一个容器中,该容器将随着圆圈延伸,并将悬停事件绑定到该容器,如下所示。

* {
    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>