БЛОГ НА HUSL


анимация с помощью z-index?

Автор вопроса: tiptop88

При наведении на квадрат, остальные меняют свое положение с помощью z-index. Не могу понять как в моем случае анимировать z-index? Спасибо https://jsfiddle.net/q3ag2w8t/4/

let oddLinks = document.querySelectorAll('.odd-link');
let evenLinks = document.querySelectorAll(".even-link");
let oddLinks_1 = document.querySelectorAll('.odd-link-1');
let oddLinks_3 = document.querySelectorAll(".odd-link-3");
let allLinks = document.querySelectorAll("[class^='center-menu__link-']");

function hoverMenu(e) {
  if (!e.target.classList.contains('.even-link')) {
evenLinks.forEach((evLink) => evLink.classList.toggle("_active"));
  }
  if (!e.target.classList.contains('.odd-link')) {
oddLinks.forEach((oddLink) => oddLink.classList.toggle("_active"));
  }
  if (!e.target.classList.contains('.odd-link-1')) {
oddLinks_1.forEach((oddLinks_1) => oddLinks_1.classList.toggle("_active"));
  }
  if (!e.target.classList.contains('.odd-link-3')) {
oddLinks_3.forEach((oddLinks_3) => oddLinks_3.classList.toggle("_active"));
  }
}

allLinks.forEach((link) => {
  link.addEventListener("mouseenter", hoverMenu);
  link.addEventListener("mouseleave", function() {
link.classList.remove("_active")
  });
});
.menu__center {
  flex: 1 1 680px;
  background: #161616;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 9;
}
@media (max-width: 1200px) {
  .menu__center {
padding: 65px 0px 0px 0px;
  }
}

.center-menu__column {
  display: flex;
  flex: 1 1 50%;
}

.center-menu__column-2 {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

.center-menu__block {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.center-menu__block-2 {
  flex: 1 1 100%;
  display: flex;
}

.center-menu__block-3 {
  display: flex;
  flex-direction: column;
  flex: 1 1 189px;
}

.center-menu__subblock {
  display: flex;
  flex-wrap: wrap;
}

.center-menu__subblock-1 {
  display: flex;
  flex: 1 1 491px;
  min-height: 150px;
}

.center-menu__subblock-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1 491px;
  min-height: 150px;
}

.center-menu__link-1 {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #161616;
  flex: 1 1 380px;
  font-weight: 700;
  font-size: 50px;
  line-height: 61px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  padding: 10px;
  transition: all 0.6s ease 0s;
  position: relative;
  z-index: 15;
}

.center-menu__link-1:hover {
  text-decoration: underline;
  color: #ffffff;
}

@media (max-width: 550px) {
  .center-menu__link-1 {
font-size: 35px;
line-height: 43px;
  }
}

.center-menu__link-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 1 50%;
  min-height: 150px;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  font-weight: 400;
  font-size: 40px;
  line-height: 49px;
  text-align: center;
  letter-spacing: 0.1em;
  color: #ccba96;
  padding: 10px;
  transition: all 0.6s ease 0s;
}

@media (max-width: 550px) {
  .center-menu__link-2 {
font-size: 25px;
line-height: 31px;
  }
}

.center-menu__link-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 1 50%;
  min-height: 150px;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  font-size: 40px;
  line-height: 49px;
  text-align: center;
  letter-spacing: 0.1em;
  color: #b99c63;
  padding: 10px;
  transition: all 0.6s ease 0s;
  position: relative;
  z-index: 13;
}

.center-menu__link-3:hover {
  text-decoration: underline;
  color: #ffffff;
}

@media (max-width: 550px) {
  .center-menu__link-3 {
font-size: 30px;
line-height: 37px;
  }
}

.center-menu__link-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 1 400px;
  min-height: 400px;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 10px;
}

.center-menu__link-4 span {
  font-weight: 400;
  font-size: 50px;
  line-height: 61px;
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
  letter-spacing: 0.2em;
  color: #b99c63;
}

.center-menu__link-4:hover span {
  text-decoration: underline;
  color: #ffffff;
}

@media (max-width: 550px) {
  .center-menu__link-4 {
font-size: 35px;
line-height: 43px;
  }
}

.center-menu__link-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 45px;
  line-height: 55px;
  text-align: center;
  color: #ccba96;
  flex: 1 1 300px;
  width: 300px;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  padding: 10px;
  transition: all 0.6s ease 0s;
}

@media (max-width: 550px) {
  .center-menu__link-5 {
font-size: 30px;
line-height: 37px;
  }
}

.center-menu__link-6 {
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ccba96;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 191px;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  padding: 10px;
  transition: all 0.6s ease 0s;
}

@media (max-width: 550px) {
  .center-menu__link-6 {
font-size: 20px;
line-height: 25px;
  }
}

.center-menu__link-7 {
  font-weight: 400;
  font-size: 50px;
  line-height: 61px;
  text-align: center;
  color: #ffffff;
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  padding: 10px;
  transition: all 0.6s ease 0s;
}

@media (max-width: 550px) {
  .center-menu__link-7 {
font-size: 35px;
line-height: 43px;
  }
}

.odd-link {
  position: relative;
  z-index: 15;
  transition: all 0.3s ease 0.3s;
}

.even-link {
  position: relative;
  z-index: 18;
  transition: all 0.3s ease 0.3s;
}

.odd-link:hover {
  text-decoration: underline;
  color: #ffffff;
}

.even-link:hover {
  text-decoration: underline;
  color: #ffffff;
}

.odd-link-1._active {
  z-index: 22;
}

.odd-link-3._active {
  z-index: 20;
}

.even-link._active {
  z-index: 15;
}

.odd-link._active {
  z-index: 17;
}
<div class="menu__center center-menu">
  <div class="center-menu__column">
<div class="center-menu__link-1 odd-link-1"></div>
<div class="center-menu__block">
  <a href="" class="center-menu__link-2 even-link"></a>
  <a href="" class="center-menu__link-3 odd-link-3"></a>
</div>
  </div>
  <div class="center-menu__column-2">
<div class="center-menu__block-2">
  <div class="center-menu__block-3">
    <a href="" class="center-menu__link-4 odd-link"><span></span></a>
  </div>
  <div class="center-menu__subblock">
    <div class="center-menu__subblock-1">
      <a href="" class="center-menu__link-5 even-link"></a>
      <a href="" class="center-menu__link-6 odd-link"></a>
    </div>
    <div class="center-menu__subblock-2">
      <a href="" class="center-menu__link-7 even-link"></a>
    </div>
  </div>
</div>
  </div>
</div>


Источник

Ответы (1 шт):

Автор решения: Инквизитор

Анимироваться может свойство, у которого: а) возможны промежуточные состояния, имеющие смысл б) существуют разные начальное и конечное состояние

Например, возможна анимация цвета от #234255 к #ACCDDA (т.к. это по факту числа). Или высоты от 50px до 85%. Но невозможна анимация высоты от 0 до незаданного значения (то бишь, "auto") т.к. браузер понятия не имеет, сколько это составит, пока не отрендерит содержимое. И невозможна анимация появления элемента от display:none до display:block, т.к. элемент либо показан, либо нет, а третьего не дано.

z-index - это не какой-то параметр, имеющий смысл величины. Это ПОРЯДКОВЫЙ НОМЕР, определяющий кто поверх кого будет отрисован. При этом "поверх" вовсе не означает, что у гипотетической стопки элементов, лежащих друг над другом, будет какая-то высота: окно браузера - двумерное пространство, в котором элементы не имеют толщины. И хоть миллиард поставь в качестве значения z-index, расположение элемента будет по высоте одним и тем же - равным нулю. Начальное и конечное состояние свойства z-index - одинаковое.

Вы, конечно, можете, например, создать сотню элементов, расставить им по порядку z-index'ы и одному из элементов задать анимацию через keyframes, увеличивая z-index на единичку через каждые 1% - но анимация будет дерганой, т.к. переход между каждым ее кадром будет мгновенным.

update:

попробуйте сделать нужное вам с помощью 3D-трансформаций: h t t p s://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d

→ Ссылка

licensed under cc by-sa 3.0 with attribution.