CSS動畫會移動另一個div

Question

我想做類似的事情：

<div>
    <div id="first"></div>
    <div id="second"></div>
<div>

在開始時，第二個在第一個之下。 當我單擊第二個時，首先進入第二個，然后單擊第一個-第二個進入第一個，依此類推。 也有動畫（通過css關鍵幀）。 我嘗試通過+ /〜登錄CSS，但是沒有-符號會影響第一個。 嘗試更改類，但動畫僅運行一次。

如何僅使用JS，CSS3做到這一點？ （我不能使用JQuery，我只是在做網站練習，為此，他們告訴我們不要使用JQuery。

有沒有辦法做到這一點？

完整問題：

<article id="middle_field">
      <section id="firstPage">
      </section>
      <section id="secondPage">
      </section>
</article>

CSS：

#middle_field section {
    position: absolute;
    width: 45%;
    height: 85%;
    margin-top: 2%;
    box-shadow: 5px 5px 30px 3px #5c5b5b;
    overflow: hidden;
}
#firstPage {
    background: rgb(255, 255, 255, 1);
    margin-left: 20%;
    z-index: 16;
}
#secondPage {
    background: rgb(98, 98, 98, 0.9);
    margin-left: 25%;
    z-index: 15;
    top: 5%;
    cursor: pointer;
}    
.deactivateFirstPage {
    animation: firstPageActivate 2s ease alternate forwards;
}
.deactivateSecondPage {
    animation: secondPageActivate 2s ease alternate forwards;
}
.activateFirstPage {
    animation: firstPageActivate 2s ease forwards;
}
.activateSecondPage {
    animation: secondPageActivate 2s ease forwards;
}
@keyframes firstPageActivate {
    0% {
        z-index: 15;
        top: 5%;
        margin-left: 20%;
        background: rgb(98, 98, 98, 0.9);
        cursor: pointer;
    }
    1% {
    }
    50% {
        margin-left: 5%;
        z-index: 16;
        top: 0%;
    }
    100% {
        cursor: default;
        background: rgb(255, 255, 255, 1);
        margin-left: 20%;
        z-index: 16;
        top: 0%;
    }
}
@keyframes secondPageActivate {
    0% {
        z-index: 15;
        top: 5%;
        margin-left: 25%;
        background: rgb(98, 98, 98, 0.9);
        cursor: pointer;
    }
    50% {
        margin-left: 45%;
        z-index: 16;
        top: 0;
    }
    100% {
        cursor: default;
        margin-left: 25%;
        background: rgb(255, 255, 255, 1);
        z-index: 16;
        top: 0;
    }
}

這些類是第二種方法，當我嘗試通過javascript將其添加時。

Answer 1

如果可以使用純JavaScript，則可以執行以下操作：

 const first = document.getElementById('first'); const second = document.getElementById('second'); first.onclick = function() { first.style.zIndex = 0; second.style.zIndex = 1; } second.onclick = function() { second.style.zIndex = 0; first.style.zIndex = 1; }

 #first { position: absolute; width: 50px; height: 50px; background-color: red; } #second { position: absolute; width: 50px; height: 50px; background-color: green; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="first"></div> <div id="second"></div> </body> </html>

Answer 2

您可以使用z-index和偽類:active 。 z-index值較大的元素始終位於值較低的元素之前。 :active在用戶在元素上按下鼠標按鈕時開始。

 .first{ z-index: 50; } .second{ z-index: 50; } .first:active{ z-index: 100; } .second:active{ z-index: 100; }

Answer 3

Okey，如果有人正在尋找答案，我就做到了：

first.onclick = function() {
    first.style.animation = 'none';
    second.style.animation = 'none';
    first.offsetHeight;
    second.offsetHeight;
    first.style.animation = 'firstPageActivate 2s ease forwards';
    second.style.animation = 'secondPageActivate 2s ease reverse forwards';
}
second.onclick = function() {
    first.style.animation = 'none';
    second.style.animation = 'none';
    first.offsetHeight;
    second.offsetHeight;
    first.style.animation = 'firstPageActivate 2s ease reverse forwards';
    second.style.animation = 'secondPageActivate 2s ease forwards';
}

CSS動畫會移動另一個div

問題描述

3 個解決方案

解決方案1
0 已采納 2018-12-04 20:55:24

解決方案2
0 2018-12-04 21:04:43

解決方案3
0 2018-12-04 21:28:46

CSS動畫會移動另一個div

問題描述

3 個解決方案

解決方案1 0 已采納 2018-12-04 20:55:24

解決方案2 0 2018-12-04 21:04:43

解決方案3 0 2018-12-04 21:28:46

解決方案1
0 已采納 2018-12-04 20:55:24

解決方案2
0 2018-12-04 21:04:43

解決方案3
0 2018-12-04 21:28:46