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，如果有人正在寻找答案，我会做到的：

Map

CSS动画会移动另一个div

3 个答案: