CSS анимация, которая перемещает другой div - PullRequest
Новая
       0

CSS анимация, которая перемещает другой div

0 голосов
/ 04 декабря 2018

Я хочу сделать что-то вроде: 

<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.

Ответы [ 3 ]

0 голосов
/ 05 декабря 2018

Вы можете использовать z-index и псевдокласс :active.Элемент с большим значением z-index всегда находится перед элементом с более низким значением.:active запускается, когда пользователь нажимает кнопку мыши на элементе. 

.first{
  z-index: 50;
}
.second{
  z-index: 50;
}
.first:active{
  z-index: 100;
}
.second:active{
  z-index: 100;
}
0 голосов
/ 05 декабря 2018

Окей, я сделал это, если кто-то ищет ответ: 

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';
}
0 голосов
/ 04 декабря 2018

Если вы можете использовать чистый 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...