CSS动画会移动另一个div
[英]CSS animation which move another div
问题描述
I want to do something like: 
我想做类似的事情：
<div>
<div id="first"></div>
<div id="second"></div>
<div>
And on start second is under the first. 在开始时，第二个在第一个之下。 When I click second, first go under second, then if i click first - second goes under the first and so on. 当我单击第二个时，首先进入第二个，然后单击第一个-第二个进入第一个，依此类推。 There are also animations (by css keyframes). 也有动画（通过css关键帧）。 I tried by + / ~ sign in css, but there is no - sign to affect first one. 我尝试通过+ /〜登录CSS，但是没有-符号会影响第一个。 Tried changing classes, but animation run only one time. 尝试更改类，但动画仅运行一次。
How can I do it using only JS, CSS3? 如何仅使用JS，CSS3做到这一点？ (I can't use JQuery, I am doing site as a course exercise and for that moment they told us not to use JQuery. （我不能使用JQuery，我只是在做网站练习，为此，他们告诉我们不要使用JQuery。
Is there a way to do this? 有没有办法做到这一点？
Full problem: 完整问题：
<article id="middle_field">
<section id="firstPage">
</section>
<section id="secondPage">
</section>
</article>
CSS: 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;
}
}
With these classes that was second approach, when i tried to add it by javascript. 这些类是第二种方法，当我尝试通过javascript将其添加时。
3 个解决方案
解决方案1
0 已采纳 2018-12-04 20:55:24
If you can use pure JavaScript then you can do something like this: 如果可以使用纯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>
解决方案2
0 2018-12-04 21:04:43
You can use z-index and pseudo-class :active . 您可以使用z-index和伪类:active 。 An element with greater value of z-index is always in front of an element with a lower value. z-index值较大的元素始终位于值较低的元素之前。 :active starts when user press mouse button down on element. :active在用户在元素上按下鼠标按钮时开始。
.first{ z-index: 50; } .second{ z-index: 50; } .first:active{ z-index: 100; } .second:active{ z-index: 100; }
解决方案3
0 2018-12-04 21:28:46
Okey, I did it, if anyone is looking for an answer: 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';
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.