GridList Animation - PullRequest
Новая
       7

GridList Animation

0 голосов
/ 26 февраля 2020

У меня есть список сетки горизонтальной прокрутки. Я реализую анимацию на элементах сетки внутри списка сетки.

  1. Размеры элемента (высота и ширина) навесного объекта должны увеличиться, а предыдущий и следующий братья и сестры должны соответственно сместиться, чтобы на данный момент находился объект не должен перекрывать / покрывать предыдущего и следующего родного брата.

  2. Размеры соседних братьев и сестер / griditem (предыдущий и следующий) также должны увеличиваться, но меньше, чем у текущего брата или сестры.

  3. Допустим, существует бесконечный горизонтальный список сетки. Если я наведу курсор на 3-й элемент сетки, его высота увеличится с 100 до 200 пикселей, а ширина также увеличится с 100 до 200 пикселей. Левый и правый элементы сетки (2-й и 4-й) к этому должны сместиться соответственно, чтобы они не покрывались из-за увеличения размеров в настоящее время находящегося на поверхности элемента сетки. И размеры левого и правого элементов сетки должны увеличиться до 50px.

  4. Я добавил пример кода. При этом непрозрачность меняется вместо размеров. Если я добавлю преобразования для размеров, это нарушит выравнивание. 

document.querySelectorAll('.dimensions').forEach(item => {
  item.addEventListener('mouseover', event => {
    event.target.classList.add('primary');
    let prev = event.target.previousElementSibling;
    if (prev) {
    	prev.classList.add('secondary');
    }
    let next = event.target.nextElementSibling;
    if (next) {
    	next.classList.add('secondary');
    }
  })
  
  item.addEventListener('mouseout', event => {
    event.target.classList.remove('primary');
    let prev = event.target.previousElementSibling;
    if (prev) {
    	prev.classList.remove('secondary');
    }
    let next = event.target.nextElementSibling;
    if (next) {
    	next.classList.remove('secondary');
    }
  })
})
.parent {
  margin-top:100px;
}

.dimensions {
  width: 100px;
  height: 100px;
  background-color: black;
  margin-right: 2rem;
}

.dimensions.secondary  {
  transform: scale(1.2);
  opacity: .9;
}

.dimensions.primary {
  transform: scale(1.5);
  opacity:1;
}

.dimensions {
  transition: transform .2s; /* Animation */
}

.flex {
  display: flex;
  flex-direction: row;
}
<html>
<head>
<title></title>
</head>
<body class="flex parent">
      <div class="dimensions"></div>
      <div class="dimensions"></div>
      <div class="dimensions"></div>
      <div class="dimensions"></div>
      <div class="dimensions"></div>
</body>
</html>
...