Animate <hr>width в браузере изменяет размер только css - PullRequest
Новая
       7

Animate <hr>width в браузере изменяет размер только css

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

Я пытаюсь анимировать hr width при изменении размера страницы, но, похоже, это никак не работает.Когда браузер изменяет размер шрифта, размер шрифта изменяется должным образом, и позиция hr со шрифтом также изменяется должным образом, но ширина изменяется мгновенно с размером браузера.Я достиг такого поведения некоторое время назад, и теперь я просто не могу понять, что я делаю неправильно.

Вот полный код страницы: 

html,
body {
  background: #aaa;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  transition: all 1s;
  font-size: calc(1.25vw + 1.75vh);
}

h1,
h3 {
  font-weight: normal;
}

hr {
  width: 100%;
  margin-left: 0%;
  border: 0;
  background-color: #fff;
  height: 1px;
  transition: width 2s ease;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.container {
  width: 50vw;
}
<div class="center">
  <div class="container">
    <hr>
    <h1>Test</h1>
    <h3>Lorem ipsum Lorem ipsum Lorem ipsum.</h3>
    <hr>
  </div>
</div>

1 Ответ

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

Как прокомментировал г-н Листер, ширина ч не может быть изменена, поскольку свойство не меняется (оно всегда составляет 100%).Неважно, что результат этого свойства изменяется!

Правильный способ справиться с этим - установить переход в действительно изменяющемся элементе, контейнере.Что ж, это правда, что его значение всегда составляет 50vw, но это особый случай, который обрабатывается браузером с эквивалентным значением в пикселях. 

html,
body {
  background: #aaa;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  transition: all 1s;
  font-size: calc(1.25vw + 1.75vh);
}

h1,
h3 {
  font-weight: normal;
}

hr {
  width: 100%;
  margin-left: 0%;
  border: 0;
  background-color: #fff;
  height: 1px;
  transition: width 2s ease;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.container {
  width: 50vw;
  transition: width 2s ease;  /*   added */

}
<div class="center">
  <div class="container">
    <hr>
    <h1>Test</h1>
    <h3>Lorem ipsum Lorem ipsum Lorem ipsum.</h3>
    <hr>
  </div>
</div>
...