Неожиданный эффект заполнения для анимации ширины - PullRequest
Новая
       28

Неожиданный эффект заполнения для анимации ширины

0 голосов
/ 03 сентября 2018

Этот вопрос похож на вопрос, решенный ранее: Задержка выравнивания текста CSS с анимацией ширины

У меня есть анимация от 0% ширины до 100% с целью загрузки страницы без видимого текста и немедленного ее отображения слева направо.

Я заметил, что с включенными отступами первая часть текста слева загружается уже видимой. Что является причиной этого? Спасибо! 

@keyframes leftright {
      0% {
        max-width: 0%;
      }
      100% {
        max-width: 100%;
      }
    }

    .test_1 {
      overflow: hidden;
      white-space: nowrap;
      width: 80vw;
      padding: 0 10vw;
      border: 1px solid red;
      font: bold 15vmin 'Playfair Display', serif;
      animation: leftright 1s;
    }
 <div class="test_1">Why hello there</div>

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

Это потому, что свойство CSS width (а также свойства max-width и min-width) относятся к width содержимого . Содержимое - это то, что находится внутри поля, рамки и отступа в блочной модели .

Если вы посмотрите на начальное свойство вашего div.test_1, это: 

.test_1 {
   overflow: hidden;
   white-space: nowrap;
   padding: 0 10vw;  
   max-width: 0;
   border: 1px solid red;
   font: bold 15vmin 'Playfair Display', serif;
}
<div class="test_1">Why hello there</div>

Визуальная ширина элемента на самом деле обусловлена ​​шириной плюс значениями левого и правого отступа 10vw, плюс ширины левой и правой границ.

Чтобы обойти это, вы можете сделать то, что предложил JasonB.

В качестве альтернативы, вы можете включить заполнение в keyframes, что также имеет побочный эффект анимации (левой и правой) заливки. 

@keyframes leftright {
  0% {
    padding: 0;
    max-width: 0;
  }
  100% {
    padding: 0 10vw;
    max-width: 100%;
  }
}

.test_1 {
  overflow: hidden;
  white-space: nowrap;
  /* width: 80vw;  <-- I removed this as it appears to contradict with max-width */
  border: 1px solid red;
  font: bold 15vmin 'Playfair Display', serif;
  max-width: 100%;
  padding: 0 10vw;
  animation: leftright 1s;
}
<div class="test_1">Why hello there</div>
0 голосов
/ 03 сентября 2018

Вы можете достичь желаемого поведения без нежелательных побочных эффектов, разделив задания презентации и анимации и назначив их отдельным элементам div.

Вот еще один вопрос, на который есть ответ, объясняющий, почему у дополненного элемента div ширина не равна нулю. рамка с отступом не может иметь ширину 0 

@keyframes leftright {
  0% {
    max-width: 0%;
  }
  100% {
    max-width: 100%;
  }
}

.test_1 {
  animation: leftright 10s;
  overflow: hidden;
  white-space: nowrap;
  width: 80vw;
  border: 1px solid red;
}

.test_2 {
  padding: 0 10vw;
  font: bold 15vmin 'Playfair Display', serif;
}
<div class="test_1">
  <div class="test_2">Why hello there</div>
</div>
...