Анимация появления псевдоэлемента под или над его родительским элементом - PullRequest
Новая
       20

Анимация появления псевдоэлемента под или над его родительским элементом

0 голосов
/ 04 ноября 2019

Предположим, у меня есть несколько div's, как это видно на предоставленном gif, и на dragover событие, которое я добавляю / удаляю класс, который добавляет псевдоэлементы before, after к элементу, над которым перетаскивается мышь (также есть логика дляопределить, перетаскивается ли он выше или ниже середины div (по горизонтали в середине). Псевдоэлементы добавляют will be dropped here заполнитель div выше или ниже требуемого элемента:

https://i.ibb.co/BndSq2s/ezgif-com-video-to-gif.gif

Itработает, но я хочу добавить некоторые анимации при появлении псевдоэлементов (заполнителей). В настоящее время они появляются или исчезают, и родительский элемент перемещается вниз или вверх сразу, но было бы неплохо, если есть какая-то анимация (например, если ониможет медленно перемещаться вверх / вниз, как показано на этом видео, родительский элемент медленно перемещается вверх / вниз при добавлении заполнителя:

https://www.loom.com/share/12b53289dfd245cb92bd7cde0f3f7f37

РЕДАКТИРОВАТЬ: Вот код длязаполнители, которые появляются в drag-over' ( drag-item` - это элемент, над которым я перетаскиваю другой элемент): 

.drag-item.before:before {
  content: 'Will be dropped here';
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 60px;
  border: 1px dashed #DADAD9;
  border-radius: 5px;
  background: white;
  left: 50%;
  top: -4px;
  transform: translate(-50%, 0);
  z-index: 99999;
}

.drag-item.after:after {
  content: 'Will be dropped here';
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 60px;
  border: 1px dashed #DADAD9;
  border-radius: 5px;
  background: white;
  left: 50%;
  bottom: -4px;
  transform: translate(-50%, 0);
  z-index: 99999;
}
...