jquery - CSS 动画一次一行

Question

更新:仍然无法解决这个问题，如果有人能提供帮助，我会很高兴，因为我目前无能为力!

我有一个类当前设置为一次动画，但我试图让它一次一行，尽管段落中的中断会不断变化，具体取决于窗口的宽度和内容如果改变。目前针对的段落类是这样的:

<p class="animated">ANIMATE THIS TEXT ONE LINE AT A TIME</p>

但是根据窗口宽度将呈现为这样，或者其他可能的变化取决于中断决定去哪里:

ANIMATE THIS
TEXT ONE LINE
AT A TIME

我见过一些其他的例子，比如 this它将文本分成多个段落标签，让它们一个接一个地制作动画，但因为我不能总是预测它会在哪里中断，所以我一直无法找到解决方案。

这就是我目前正在使用的:

.animated{
opacity:1;
-webkit-animation-name: flip;
-webkit-animation-duration: 0.15s;
-webkit-animation-iteration-count: 3;
-webkit-animation-direction: alternate;
}

@keyframes flip {
0%, 50%   {transform:rotateY(180deg);}
50.1%, 100%  {transform:rotateY(0deg);}
}

希望有人知道答案!

谢谢

Answer 1

我不确定我是否理解正确，但万一我理解了......我想出了一个想法，即逐个字母地为文本制作动画，如果正确实现，它实际上看起来就像整个文本的动画.这是工作 fiddle :https://jsfiddle.net/0n5dnqau/4/

我希望 HTML 看起来类似于:

<p class="par hid">
    Lorem ipsum dolor sit amet, populo feugiat legimus vix eu, propriae  
    ...
</p>

然后我们会像这样运行脚本:

var p = $('.par');
var animator = $('<span class="anim"></span>');
var hidden = $('<span class="hid"></span>')
var textLength = p.text().length;
var offset = 0;

function animate(letter_position) {
    var text = p.text();
    p.text('');
    var textBefore = text.substring(0, letter_position - 1);
    var textAfter = text.substring(letter_position, textLength);
    var letter = text.substr(letter_position - 1, 1);
    animator.text(letter);
    hidden.text(textAfter);
    p.append(textBefore);
    p.append(animator);
    p.append(hidden);
}

var interval = setInterval(function(){
    if (p.hasClass('hid')) p.removeClass('hid');
    if (offset - 2 === textLength) {
        clearInterval(interval);
        p.children('.anim').remove();
        p.children('.hid').remove();
        return;
    } 
    animate(offset);
    offset++;
}, 100);

它的 CSS 非常简单:

.anim {
    animation: show .01s ease-in-out;
}

@keyframes show {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.hid {
    opacity: 0;
}

它所做的实际上是将文本分成 3 个部分。 beforeText 被添加到没有任何样式的段落中，它只是普通段落的文本。然后 animator 是将被动画化的字母并且 hidden 部分将被隐藏(我猜这并不奇怪)。然后我们按照确切的顺序将这 3 个部分附加到段落中。

你可以在setInterval中调整动画效果和长度以及间隔，让它更像是你想要实现的动画。