CSS дождитесь завершения родительского перехода, затем мгновенный переход дочернего

Question

У меня есть ситуация, подобная следующей

.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;
  
  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: blue;
}

<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

Мне нужно, чтобы ребенок оставался на той же ширине, пока родитель не завершил свой переход.

Я знаю, что это возможно при абсолютном стили. Смотрите фрагмент ниже:

.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;

  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 200px;
  height: 100%;
  background-color: blue;
}

.parent:hover .child {
  width: 300px;
  
  transition-delay: 0.25s;
}

<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

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

Answer 1

На самом деле это возможно только с CSS, хотя это немного грязный метод. Если вы измените font-size на number [px|em|etc.] вместо свойства width, это позволит изменить размер обоих «независимо».

Недостаток этого метода в том, что вам нужно будет добавить еще один дочерний элемент (или ::before | ::after) с более разумным font-size, если вы хотите отобразить некоторый текст внутри этих элементов, так что может быть лучше для вашей цели использовать JS как @ jm c, но если вы не можете (или не хотите: p), это может быть решением для вас.

.parent {
  font-size: 200px;
  width: 1em;
  height: 100px;
  padding: 25px;
  background-color: grey;
  
  transition: width 0.25s;
}

.parent:hover {
  font-size: 300px;
}

.child {
  width: 1em;
  height: 100%;
  background-color: blue;
  
  transition: width 0.25s;
}

.child:hover, .parent:hover > .child {
  transition: width 0.25s 0.25s linear;
}

<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

Answer 2

Просто добавьте тот же переход в дочерний класс. Взгляните ниже:

.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;

  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 200px;
  height: 100%;
  background-color: blue;
  transition: width 0.25s;
}

.parent:hover .child {
  width: 300px;
  
  transition-delay: 0.25s;
}

<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

Если вы скажете, что .child будет иметь ширину 100%, значит, он действительно будет следовать ширине своего родителя независимо от того, какая ширина это. Чтобы он имел переход с задержкой, .child должен иметь начальную ширину. Но если вы настаиваете на том, чтобы у ребенка была ширина 100%, возможно ли использовать JS / JQuery? Если это так, проверьте фрагмент, который я имею ниже:

$(document).ready(function() {
  var width = $('.child').width();
  
  $('.child').css({
    'width': width
  });
  
  $('.parent').hover(function() {
    setTimeout(function() {
      $('.child').css({
        'width': 'calc(100%)'
      })
    }, 500)
  }, function() {
    $('.child').css({
      'width': width
    });
  });
});

.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;
  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: blue;
  transition: .2s width 0.25s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>