Масштабирование ширины div с установленным параметром display: inline-block в соответствии с длиной содержимого div - PullRequest
Новая
       28

Масштабирование ширины div с установленным параметром display: inline-block в соответствии с длиной содержимого div

0 голосов
/ 05 февраля 2019

Я хочу сделать анимацию, масштабируя ширину div от 0% до 100% содержимого div .Я не могу использовать px, чтобы установить размеры div в ключевых кадрах, потому что благодаря display: inline-block размеры div меняются в зависимости от длины текста внутри div.Тогда я должен использовать процент.

Проблема в том, что процент относится к ширине сайта, а не к ширине div с текстом.Таким образом, во время анимации div расширяется до 100% ширины сайта и после этого приспосабливается к длине текста.

Как избежать увеличения ширины div до 100% сайта и анимировать только ширину div на основе текста?

Вот мой код: 

  .expanding_div {
  height: 40px;
  background-color: black;
  line-height: 40px;
  display: inline-block;
  color: white;
  font-size: 20px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: clip;
  padding-left: 15px;
  padding-right: 15px;
  position: absolute;
  animation: rozwiniecie-nakladka4 700ms ease-in-out;
  animation-delay: 750ms;
}

@keyframes rozwiniecie-nakladka4 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
<div class="expanding_div">Adam Nowak i Jan Kowalski</div>

Этот jsfiddle имеет здесь тот же код.

РЕДАКТИРОВАТЬ:

Могу ли я использовать getBoundingClientRect(), чтобы каким-то образом получить размер div и использовать размер для анимации ключевых кадров?Если так - как это сделать правильно?

...