javascript - 移动浏览器的自定义 css 动画中断

Question

我想使用下面提到的 css 动画，但它在移动浏览器中中断，因为我将溢出设置为隐藏，将空白设置为不换行作为动画的一部分。

p{
  color: black; 
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: type 5s steps(60, end);
  opacity: 0;
}

@keyframes type{
  from { width: 0; opacity:1;} 
  to { opacity:1;} 

这是代码 https://jsfiddle.net/ed8nuf76/ 的 jsfiddle

如果你仔细观察，完整的句子不会在移动浏览器中呈现，甚至在 Fiddle 中，在文本宽度达到 100% 后，它会 chop 文本而不是将其溢出到第二行。

有什么办法可以解决这个问题吗？

Answer 1

如果你想要一个不涉及 javascript 的解决方案，你可以使用下面的纯 CSS 方法 - 但要让它起作用，你需要知道你的内容占用了多少行(因为 CSS 单独赢了'能够通过计算得出这一点)。

正如您在下面的示例中看到的，如果您知道您的内容占用 3 行并且您还知道每行的 line-height 为 24px你可以告诉动画包含的 div 在开始时应该是 24px 高，1 秒后 48px 高，72px 再过一秒又高了，最后 96px 高了。

然后，您可以使用不透明的 ::after 伪元素隐藏 div 中最低的可见文本行，并为伪元素提供 1 秒的 animation重复三次，每次，伪元素的宽度从 300px 缩小到 0，显示下面的文本。

工作示例:

p {
margin-left: 6px;
font-size: 16px;
line-height: 24px;
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
animation: type 3s;
}

div {
position: relative;
width: 300px;
height: 96px;
padding: 0 6px;
overflow: hidden;
animation: growTaller 3s step-end;
}

div p {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 24px;
white-space: normal;
overflow-x: hidden;
overflow-y: visible;
animation: none;
}

div::after {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
z-index: 6;
width: 312px;
height: 24px;
background-color: rgb(255,255,255);
animation: typeFaster 1s linear 3;
}

@keyframes type {
from {width: 0;} 
to {width: 100%;} 
}

@keyframes typeFaster {
from {width: 312px;} 
to {width: 0;} 
}

@keyframes growTaller {
0%   {height: 24px;}
33.33%  {height: 48px;}
66.66%  {height: 72px;}
100%  {height: 96px;}
}

<p>Hi folks, this is typing animation using CSS, I want this to run in mobile browsers without breaking.</p>

<div>
<p>Hi folks, this is typing animation using CSS, I want this to run in mobile browsers without breaking. Using this method, it works!</p>
</div>