CSS-переход с помощью преобразований - PullRequest
Новая
       8

CSS-переход с помощью преобразований

0 голосов
/ 19 ноября 2018

Я пытаюсь анимировать между полной строкой текста и ее сокращением, используя переходы преобразования CSS (показано в фрагменте ниже).

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

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

Короче говоря, код, который я написал до сих пор, успешно преобразует все буквы, но оставляет некоторые буквы прыгающими рядом друг с другом в момент начала перехода. 

#bhead.smaller h1 {
  position: fixed;
  top: 2vh;
  right: 0;
  left: 0;
  font-size: 3.5vh;
  margin: auto;
  padding: 0;
  text-transform: lowercase;
  transition: all 0.5s ease-out;
}

#bhead h1 div {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  transition: all 5s linear;
}

#bhead h1 .del {
  display: inline-block;
  width: auto;
  opacity: 1;
}

#bhead.smaller h1 .del {
  transform: scaleX(0);
  width: 0;
  opacity: 0;
}

#bhead h1 .undel {
  display: inline-block;
  transform: scaleX(0);
  width: 0;
  opacity: 0;
}

#bhead.smaller h1 .undel {
  transform: scaleX(1);
  width: auto;
  opacity: 1;
}

button {
  position: fixed;
  top: 15vh;
}
<body id="bhead">
  <h1 id="header" class="middle unselectEase"><div>J</div><div class="del">o</div><div>r</div><div class="del">dan&nbsp;</div><div>Ma</div><div class="del"></div><div>nn</div><div class="undel">.com</div>
  </h1>
  <button onclick="document.querySelector('#bhead').className = document.querySelector('#bhead').className == 'smaller' ? '' : 'smaller'">Transform</button>
</body>

(Вам может понадобиться расширить фрагмент, чтобы интервал работал.)

1 Ответ

0 голосов
/ 19 ноября 2018

Понял! Обнаружив, что width должен переходить между двумя фиксированными значениями (что также сложно с текстом), я смог найти этой статьи , в которой описывалось, как max-width может быть переведен вместо width в избежать этого в целом. Автор также предоставляет удобную демонстрацию JSFiddle, но я исправил фрагмент ниже.

Учитывая, что существует риск установки атрибута max-width, но я вполне могу использовать его в этом конкретном случае. 

#bhead h1 {
  height: 6vh;
  font-size: 6vh;
  white-space: nowrap;
  position: fixed;
  right: 0;
  left: 0;
}

#bhead.smaller h1 {
  position: fixed;
  top: 2vh;
  right: 0;
  left: 0;
  font-size: 3.5vh;
  margin: auto;
  padding: 0;
  text-transform: lowercase;
  transition: all 0.5s ease-out;
}

#bhead h1 div {
  display: inline-block;
  margin: 0;
  padding: 0;
  transition: all 5s linear;
  max-width: 20vw;
}

#bhead h1 .del {
  display: inline-block;
  opacity: 1;
}

#bhead.smaller h1 .del {
  transform: scaleX(0);
  max-width: 0;
  opacity: 0;
}

#bhead h1 .undel {
  display: inline-block;
  transform: scaleX(0);
  max-width: 0;
  opacity: 0;
}

#bhead.smaller h1 .undel {
  transform: scaleX(1);
  max-width: 0;
  opacity: 1;
}

button {
  position: fixed;
  top: 15vh;
}
<body id="bhead">
  <h1 id="header" class="middle unselectEase"><div>J</div><div class="del">o</div><div>r</div><div class="del">dan&nbsp;</div><div>Ma</div><div class="del"></div><div>nn</div><div class="undel">.com</div>
  </h1>
  <button onclick="document.querySelector('#bhead').className = document.querySelector('#bhead').className == 'smaller' ? '' : 'smaller'">Transform</button>
</body>
...