jqueryでの1文字ずつのアニメーションについて

投稿者: Anonymous

ジェイクエリーの1文字ずつのテキストアニメーションで複数行対応する方法で困っています
splitで1文字ずつ配列にいれてforeachで配列をspanでくくりアニメーションさせているのですが
brタグなども1文字ずつ格納されてしまうためbrタグは1文字で格納されないようにしたいのですが方法がわかりません
欲を言えばbrタグのみではなくhtmlタグは1文字で配列に格納されずにしたいです。
また、foreachで回してspanを取り付ける方法ではなくて
htmlにspanを書く方法だと簡単に実装できるかと思うのですが毎回1文字ずつspanで囲むのが大変になるので、できればしたくありません。
初めて投稿するため勝手がわかりませんが、今現在このような感じです。
どなたかいいやり方ご教授いただけると助かります。
https://codepen.io/eqnu7zplnsaq9gl/pen/PBLpPm

_x000D_

_x000D_

$(function() {_x000D_
  var text = $(".text_animate").html();_x000D_
  /*var html_tags = /</?[^>]+>/;_x000D_
  var text_split=text.split(html_tags);*/_x000D_
  var text_split = text.split("");_x000D_
  $(".text_animate").html("");_x000D_
_x000D_
  function animate() {_x000D_
    text_split.forEach(function(val) {_x000D_
      /*console.log(val);*/_x000D_
_x000D_
_x000D_
      $(".text_animate").append("<span>" + val + "</span>");_x000D_
_x000D_
    });_x000D_
_x000D_
  }_x000D_
  animate();_x000D_
  $(window).load(function() {_x000D_
    $(".text_animate span").each(function(index) {_x000D_
      $(this).css({_x000D_
        transitionDelay: index * 0.6 + "s"_x000D_
      }).addClass("text_animate_on");_x000D_
    });_x000D_
  });_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
});

_x000D_

@charset "UTF-8";_x000D_
_x000D_
/*.text_animate{_x000D_
	display: none;_x000D_
}*/_x000D_
_x000D_
.text_animate span,_x000D_
.test_animate span {_x000D_
  transition: 1s;_x000D_
  opacity: 0;_x000D_
}_x000D_
_x000D_
.text_animate span.text_animate_on,_x000D_
.test_animate span.text_animate_on {_x000D_
  transition: 1s;_x000D_
  opacity: 1;_x000D_
}_x000D_
_x000D_
.text_animate.text_animate_rotate span,_x000D_
.text_animate_rotate.test_animate span {_x000D_
  transform: rotate(-45deg);_x000D_
  display: inline-block;_x000D_
}_x000D_
_x000D_
.text_animate.text_animate_rotate span.text_animate_rotate_on,_x000D_
.text_animate_rotate.test_animate span.text_animate_rotate_on {_x000D_
  transform: rotate(0deg);_x000D_
}_x000D_
_x000D_
.text_animate.text_animate_size span,_x000D_
.text_animate_size.test_animate span {_x000D_
  font-size: 22px;_x000D_
}_x000D_
_x000D_
.text_animate.text_animate_size span.text_animate_size_on,_x000D_
.text_animate_size.test_animate span.text_animate_size_on {_x000D_
  font-size: 10px;_x000D_
}_x000D_
_x000D_
_x000D_
/*部分的に変更したいときにextend使用サンプルここから*/_x000D_
_x000D_
.test_animate.test_animate_size_on span {_x000D_
  font-size: 25px;_x000D_
}_x000D_
_x000D_
.test_animate.test_animate_size_on span.test_animate_size_on {_x000D_
  font-size: 15px;_x000D_
}_x000D_
_x000D_
_x000D_
/*部分的に変更したいときにextend使用サンプルここまで*/

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>_x000D_
<p class="text_animate">te<br>st</p>

_x000D_

_x000D_

_x000D_

解決

splitに正規表現を組み合わせてできるかと思います。
確認用に以下をご確認くださいませ。
codepenにあったコードに対して手を加えておりますので。
そのまま動くかと思います。

_x000D_

_x000D_

$(function(){_x000D_
	var text=$(".text_animate").html();_x000D_
	var text_split=text.split(/(?=[^>]*(?:<|$))/);_x000D_
	$(".text_animate").html("");_x000D_
	function animate(){_x000D_
			text_split.forEach(function(val){_x000D_
		/*console.log(val);*/_x000D_
		_x000D_
		_x000D_
		 $(".text_animate").append("<span>"+val+"</span>");_x000D_
		_x000D_
	});_x000D_
	_x000D_
	}_x000D_
	animate();_x000D_
	$(window).load(function(){_x000D_
		$(".text_animate span").each(function(index){_x000D_
		$(this).css({transitionDelay:index * 0.6 +"s"}).addClass("text_animate_on");_x000D_
	});_x000D_
	});_x000D_
	_x000D_
	_x000D_
		_x000D_
	_x000D_
});

_x000D_

/*.text_animate{_x000D_
	display: none;_x000D_
}*/_x000D_
.text_animate{_x000D_
	span{_x000D_
		transition: 1s;_x000D_
	opacity: 0;_x000D_
	&.text_animate_on{_x000D_
		transition: 1s;_x000D_
		opacity: 1;_x000D_
		_x000D_
	}_x000D_
	}_x000D_
	&.text_animate_rotate span{_x000D_
		transform: rotate(-45deg);_x000D_
		display: inline-block;_x000D_
		&.text_animate_rotate_on{_x000D_
			transform: rotate(0deg);_x000D_
		}_x000D_
	}_x000D_
	&.text_animate_size span{_x000D_
		font-size: 22px;_x000D_
		&.text_animate_size_on{_x000D_
			font-size: 10px;_x000D_
		}_x000D_
	}_x000D_
}_x000D_
/*部分的に変更したいときにextend使用サンプルここから*/_x000D_
.test_animate{_x000D_
	@extend .text_animate;_x000D_
	&.test_animate_size_on span{_x000D_
		font-size: 25px;_x000D_
		&.test_animate_size_on{_x000D_
			font-size: 15px;_x000D_
		}_x000D_
	}_x000D_
}_x000D_
/*部分的に変更したいときにextend使用サンプルここまで*/

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<p class="text_animate">te<br>st</p>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *