(Только CSS) Изменение родителя при динамическом создании нового дочернего элемента - PullRequest
Новая
       27

(Только CSS) Изменение родителя при динамическом создании нового дочернего элемента

0 голосов
/ 07 мая 2018

Есть ли способ определить, был ли создан новый ребенок в родителе только с css (scss / sass)?

У меня есть следующий код 

.toast-bottom-right:hover {
  max-height: 40%;
}

.toast-bottom-right:not(:hover) > .toast-error:not(:first-child) {
  display: none;
}

.toast-bottom-right:not(:hover){
  animation: collapse 2s 1s forwards;
}

.toast-bottom-right {
  max-height: 40%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.toast-bottom-right::-webkit-scrollbar {
  display: none;
}

@keyframes collapse{
  from  {
    max-height: 40%;
  }
  to {
    max-height: 1.5%;
  }
}

Это вызывает родительский элемент при наведении (при этом все дочерние элементы), затем, когда при наведении курсора все дочерние элементы отключаются, но первые скрываются. И через секунду максимальная высота родительского элемента устанавливается на маленький размер (1,5%), в результате чего родительский элемент становится просто маленькой полосой. Который затем может зависнуть.

Моя цель - изменить максимальную высоту родителей до ее исходного состояния (40%), когда добавляется новый ребенок, и через 5 секунд анимация отмены начинается снова

Конкретный вопрос: Есть ли способ достичь этого или что-то близкое к этому только с помощью css (scss / sass)?

...