スパンで文字を区切らずにテキストをアニメーション化する方法は？

Question

私は要素内のテキストを動的にアニメーション化しようとしていますが、これを行う方法を見つけることができません。これまでに試したことがありますが、それは最良の方法ではありません。

私はsplitのようないくつかの方法を試してみましたが、それは配列の中にテキストを入れて、スパンで文字を押しますが、うまくいきません。

var i = -1, 
 
    spn = document.querySelectorAll('.spn'), 
 
    stInt; 
 

 

 
var setTO = setTimeout(function AnimTxt() { 
 
    stInt = setInterval(function() { 
 
    if (i <= spn.length) { 
 
     i += 1; 
 
     $('.spn').eq(i).css({ 
 
     color: "red", 
 
     marginTop: "-10px" 
 
     }); 
 

 
     return false; 
 
    } 
 
    }, 100); 
 
}, 2000);

.spn { 
 
    position: absolute; 
 
    transition: all 1s ease; 
 
    top: 8px; 
 
    left: 5px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0px; 
 
    margin-top: 40px; 
 
} 
 

 
.spn:nth-of-type(2) { 
 
    left: 16px 
 
} 
 

 
.spn:nth-of-type(3) { 
 
    left: 27px 
 
} 
 

 
.spn:nth-of-type(4) { 
 
    left: 42px 
 
} 
 

 
p { 
 
    margin-top: 30px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<span class="placeholder-cont"> 
 
    <span class="spn">t</span> 
 
    <span class="spn">e</span> 
 
    <span class="spn">x</span> 
 
    <span class="spn">t</span> 
 
</span>

Answer 1

私は今のspanタグに文字を分離してみました。これについては、とすれば、新しい要素を分けることなく改善することができます。 - これを達成するための方法は、文字をspanに分けることができません。

for (i = 0; i < text.length; i++) { 
    $(".placeholder-cont").append("<span class='spn'>" + text[i] + "</span>"); 
} 

そしてこのfiddleを参照してください代わりにsetInterval

$(".spn").each(function(index, el) { 
    setTimeout(function() { 
    $(el).css({ 
     color: "red", 
     marginTop: "-10px" 
    }); 
    if (index == (text.length - 1)) { 
     setTimeout(function() { 
     $('p').show(); 
     }, 1000); 
    } 
    }, 100 * index); 
}); 

の.each()とsetTimeout()を使用してそれらをアニメーション化。

EDIT

position: absoluteを除去するために、私は、タグにまたがるために追加した - そして

display: inline-block; 

とは、プロパティを '変換' を使用してアニメーション。ここで

Updated fiddle.

Answer 2

別のアプローチです。 split()を使用して文字から配列を作成し、map()およびreplace()を使用して、各文字をspanにラップし、次にjoin()を文字列に戻すことができます。

$('.text').html($('.text').text().split('').map(function(e) { 
 
    return e.replace(/[^ ]/g, "<span class='letter'>$&</span>"); 
 
}).join('')); 
 

 

 
$('.text .letter').each(function(i) { 
 
    setTimeout(() => { 
 
    $(this).css({ 
 
     'transform': 'translateY(-50px)', 
 
     'color': 'red' 
 
    }); 
 
    }, 100 * i); 
 
})

.text { 
 
    font-size: 25px; 
 
    text-transform: uppercase; 
 
} 
 
.letter { 
 
    margin-top: 50px; 
 
    transition: all 0.3s ease-in-out; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text">Lorem ipsum dolor.</div>