Продолжительность анимации относительно ширины с помощью calc? - PullRequest
Новая
       9

Продолжительность анимации относительно ширины с помощью calc?

1 голос
/ 16 мая 2019

Возможно ли установить animation-duration относительно ширины элемента, используя calc, когда элемент добавляется динамически и поэтому его ширина неизвестна до загрузки страницы?

У меня есть несколько «новостных лент» с текстами, которые переводятся горизонтально справа налево, используя следующие ключевые кадры: 

@keyframes ticker {
  0% {
    transform: translateX(1%);
    visibility: visible;
  }
  100% {
    transform: translateX(-101%);
  }
}

А это CSS: 

  animation-name: ticker;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

Проценты в translateX относятся к переводимому элементу. Таким образом, 101% на 1% больше, чем собственная ширина элемента.

Из-за этого ширина элемента влияет на скорость перевода. Более широкие элементы идут быстрее, чтобы выполнить анимацию за 10 секунд, а короткие элементы - медленнее.

Вот рабочий пример, который учитывает некоторые требования макета моего рабочего сценария: 

.grid{
  display: grid;
  grid-template-columns: 1fr;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 5em;
  width: 40vw;
  padding:0;
  margin:0;
}
.ticker {
  margin: 0;
  overflow: hidden;
  display: inline-block;
}

.wrapper {
  display: inline-block;
  white-space: nowrap;
  animation-name: ticker;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  padding-left: 100%;
}

.wrapper a {
  margin-right: 3em;
}

@keyframes ticker {
  0% {
    transform: translateX(1%);
    visibility: visible;
  }
  100% {
    transform: translateX(-101%);
  }
}
<ul class="grid">
  <li class="ticker">
    <div class="wrapper">
      <a href="">This now</a>
      <a href="">Stunning example</a>
    </div>
    <div class="wrapper">
      <a href="">Pan</a>
    </div> 
    <div class="wrapper">
      <a href="">Terribly known or unknown or perhaps just new</a>
      <a href="">In times of war every hole is a trench</a>
    </div>
  </li>
</ul>

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

Я подумал, что, возможно, я смогу использовать calc() для умножения или деления 10 на что-то, что относится к ширине элемента. К сожалению, здесь ширина элемента является динамической, так как она определяется строкой внутри элемента, и строка не известна до загрузки страницы.

Спасибо

1 Ответ

1 голос
/ 16 мая 2019

Я бы изменил вашу структуру, чтобы все div имели одинаковую ширину.Вам просто нужно сохранить элемент блока-обертки и удалить display:grid, чтобы разрешить поведение встроенного блока.Также замените отступы с полями. 

.grid{
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 5em;
  width: 40vw;
  padding:0;
  margin:0;
}
.ticker {
  margin: 0;
  display: inline-block;
  margin-left:100%;
}

.wrapper {
  white-space: nowrap;
  animation-name: ticker;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.wrapper a {
  margin-right: 3em;
}

@keyframes ticker {
  0% {
    transform: translateX(1%);
    visibility: visible;
  }
  100% {
    transform: translateX(-101%);
  }
}
<ul class="grid">
  <li class="ticker">
    <div class="wrapper">
      <a href="">This now</a>
      <a href="">Stunning example</a>
    </div>
    <div class="wrapper">
      <a href="">Pan</a>
    </div> 
    <div class="wrapper">
      <a href="">Terribly known or unknown or perhaps just new</a>
      <a href="">In times of war every hole is a trench</a>
    </div>
  </li>
</ul>
...