Question

动态添加元素时，是否可以使用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()将10s乘以或除以表示元素宽度的东西。不幸的是，这里的元素宽度是动态的，因为它是由元素内的字符串定义的，并且在页面加载之前未知该字符串。

谢谢

Answer 1

我将更改您的结构以确保所有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>

动画持续时间相对于宽度的计算？

1 个答案: