Question

这是我在本网站上的第一个问题，因此任何关于如何编辑未来的建议都将被感激。

现在我有一个从左到右显示的文字，就像在选框中一样，动画可以在30秒内滚动文字。

我的问题是，即使动画做我想要的，它的动作速度与动画的速度一样奇怪，当文本没有完全显示在选框上时，它会以恒定的速度运行，但是一旦到达文本的末尾，然后以非常明显的方式减慢动画的速度。

这是我现在的代码：

HTML：

<div>  
  <p id="text" class="marquee smart-stops-small">{A-B}</p>
</div>
<div>
  <p id="text" class="marquee smart-stops-small">{A-B-C-D-E-F-G-H-I-J-K-etc.}</p>
</div>

CSS：

.smart-stops-small{
  font-size: 1.9em;
  text-align: center;
  line-height: 3.8em;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 3.8em; /* Fallback for non-webkit */
  margin: 0 auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make it a marquee */
.marquee {
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 30s linear infinite;
}

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 15em }
    100% { text-indent: -55em }
}

我创建了一个包含HTML和CSS的小提琴： https://jsfiddle.net/zkv1t4g6/1/

编辑：

在触摸了一下 smart-stops-small 的CSS类后，我发现破坏动画的东西是 text-align 属性< / p>

这个更新的小提示显示： https://jsfiddle.net/zkv1t4g6/2/

编辑2：

在最后一个小提琴中，我删除了该类的大多数属性，在这一个中，唯一被删除的属性是text-align: center;，似乎动画效果很好： https://jsfiddle.net/zkv1t4g6/3/

现在，问题发生了变化，我想知道为什么文本对齐会干扰动画的速度。这两者之间的相互作用是什么？

谢谢！

Answer 1

现在没有太多时间来了解其背后的实际理由，但我不能告诉你是什么原因造成的： -webkit-box-orient: vertical;

.smart-stops-small{
  font-size: 1.9em;
  text-align: center;
  line-height: 3.8em;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 3.8em; /* Fallback for non-webkit */
  margin: 0 auto;
  -webkit-line-clamp: 2;
  /*-webkit-box-orient: vertical;*/
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make it a marquee */
.marquee {
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 30s linear infinite;
}

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 15em }
    100% { text-indent: -55em }
}

<div>  
  <p id="text" class="marquee smart-stops-small">{A-B}</p>
</div>
<div>
  <p id="text" class="marquee smart-stops-small">{A-B-C-D-E-F-G-H-I-J-K-etc.}</p>
</div>

Answer 2

这种情况正在发生，因为您正在为正在制作动画的... const modal = this.modalCtrl.create(MyComponent); // how do I catch 'myAwesomeEvent' emitted from within MyComponent? ...分配text-align: center;。删除此行，动画将顺利流动。

<强> CSS

<div>

<强> JSFiddle

Answer 3

如果您正在寻找非常平稳的过渡，则应该查看transform属性。以下是使用转换的选框的示例：https://jsfiddle.net/8o335a6r/

（我在选框内容中添加了灰色背景，以便您可以看到选框移动的方式）。

主要变化：

.smart-stops-small{
  font-size: 1.9em;
  text-overflow: ellipsis;
  text-align: center;
  background: #CCC;
}


.marquee {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}


.marquee__scroll {
  transform: translateX(100%);
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

<div class="marquee">
  <div class="marquee__scroll">
    <p class="marquee__content  smart-stops-small">A B C D E F G H I J K L M etc</p>
  </div>
</div>

为什么要使用transform？

使用CSS3 translate值意味着您的动画将使用子像素消除锯齿，这意味着浏览器可以逐步移动元素，而不是一次移动一个像素，从而实现更平稳的过渡。

翻译（使用translate）也在浏览器窗口中的自己的层中执行，这意味着浏览器不需要经常重新绘制屏幕，从而大大提高了渲染效率性能，特别是在移动设备上。

为什么文本对齐属性会降低文本动画的速度？

编辑：

编辑2：

3 个答案: