Заставить два перекрывающихся поля исчезнуть друг в друге при нажатии - PullRequest
Новая
       8

Заставить два перекрывающихся поля исчезнуть друг в друге при нажатии

0 голосов
/ 27 августа 2018

Я пытался создать следующую анимацию:

(1) У меня есть кнопка, состоящая из белого поля 100x100 поверх черного поля 100x100.

(2) При нажатии на кнопку белый ящик исчезает в черный ящик.(см. результат здесь ) 

// html
<div class="button">
  <div class="white u-on-top"></div>
  <div class="black"></div>
</div>

// css
.button {
  width: 100px;
  height: 100px;
  margin: 10px;
  position: relative;
  display: inline-block;  

 .white {
   width: 100%;
   height: 100%;    
   background: #fff;
   border: 1px solid #000;

   position: absolute;    

   transition: .5s;    
  }
 .black {
   width: 100%;
   height: 100%;
   background: #000;
   border: 1px solid #000;
  }
}

.u-on-top {
  z-index: 1;
}
.u-at-bottom {
  z-index: -1;
}

// javascript
var btn = document.querySelector(".button");
var btnState = false;

btn.addEventListener("click", () => {
  var btnw = btn.querySelector(".white");
  if (!btnState) {
    btnw.style.transform = "scale(0)";
    btnState = true;
  } else {
    btnw.style.transform = "scale(1)";
    btnState = false;
  }
})

(3) То, что я безуспешно пытался сделать, это также заставить черный ящик исчезнуть в белом поле при нажатии.

Итак:

  • нажатие на белое поле заставляет его исчезнуть в черном поле

  • нажатие на черном поле делает егоисчезают в белом поле

  • нажатие на белое поле заставляет его исчезнуть в черном поле

  • и так далее ...

Моя идея состояла в том, чтобы получить эффект, изменив z-index блоков при нажатии, используя служебные классы u-on-top и u-at-bottom (например, черный ящикпосле исчезновения белого ящика), но я получил странные результаты.

1 Ответ

0 голосов
/ 27 августа 2018

Вы можете попытаться настроить какой-то переход, хитрость заключается в том, чтобы добавить задержку к z-index, чтобы она изменилась после эффекта масштабирования.Я также изменил код JS и уменьшил CSS: 

var btnW = document.querySelector(".white");
var btnB = document.querySelector(".black");
var btnState = false;

btnW.addEventListener("click", () => {
  btnB.classList.remove('hide');
  btnW.classList.add('hide');
  btnW.classList.remove('u-on-top');
  btnB.classList.add('u-on-top');
})
btnB.addEventListener("click", () => {
  btnW.classList.remove('hide');
  btnB.classList.add('hide');
  btnB.classList.remove('u-on-top');
  btnW.classList.add('u-on-top');
})
.button {
  width: 100px;
  height: 100px;
  margin: 10px;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.button>div {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  position: absolute;
  transition: transform 0s, z-index 0s 0.5s;
  z-index:0;
}

.button .white {
  background: #fff;
}

.button .black {
  background: #000;
}
.button>div.hide {
  transform:scale(0);
  transition: transform .5s, z-index 0s 0.5s;
}
.button>div.u-on-top {
  z-index:1;
}
<div class="button">
  <div class="white u-on-top"></div>
  <div class="black"></div>
</div>
...