JavaScript+CSSアニメーション

Question

CSSアニメーションで、下記のようなソースがあります
これをJavaScriptで制御したいです
制御する動作は次へボタンを押すとテキストが切り替わる、というものです
nth-childの動的操作はJavaScriptで可能でしょうか？
JQueryの利用は考えていません

<style>
.container{
	width:100%;
	height: 100%;
}

.texts p{
	color: black;
	font-size: 50px;
	opacity:0;
}

.texts p:nth-child(1) { animation: text-anim 5s 0s;}
.texts p:nth-child(2) { animation: text-anim 5s 5s;}
.texts p:nth-child(3) { animation: text-anim 5s 10s;}
.texts p:nth-child(4) { animation: text-anim 5s 15s;}
.texts p:nth-child(5) { animation: text-anim 5s 20s;}
.texts p:nth-child(6) { animation: text-anim 5s 25s;}
.texts p:nth-child(7) { animation: text-anim 5s 30s;}
.texts p:nth-child(8) { animation: text-anim 5s 35s;}
.texts p:nth-child(9) { animation: text-anim 5s 40s;}
.texts p:nth-child(10) { animation: text-anim 5s 45s;}
.texts p:nth-child(11) { animation: text-anim 5s 50s;}
.texts p:nth-child(12) { animation: text-anim 5s 55s;}
.texts p:nth-child(13) { animation: text-anim 5s 60s;}

@keyframes text-anim {
	0%, 100% {opacity: 0;}
	20%, 80% {opacity: 1;}
}
</style>

<input type="button" value="次へ">
<div class="container">

	<div class="texts">
		<p>吾輩は猫である 名前はまだ無い</p>
		<p>どこで生れたか とんと見当がつかぬ</p>
		<p>何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している</p>
		<p>吾輩はここで始めて 人間というものを見た</p>
		<p>しかもあとで聞くとそれは</p>
		<p>書生という人間中で一番 獰悪な種族であったそうだ</p>
		<p>この書生というのは時々我々を 捕て煮て食うという話である</p>
		<p>しかしその当時は何という考もなかったから</p>
		<p>別段恐しいとも思わなかった</p>
		<p>ただ彼の掌に載せられて スーと持ち上げられた時何だか</p>
		<p>フワフワした感じが あったばかりである</p>
		<p>掌の上で少し落ちついて 書生の顔を見たのが</p>
		<p>いわゆる人間というものの 見始めであろう</p>
	</div>
</div>

Answer 1

ボタンにidを追加。

<input type="button" value="次へ" id="next-btn">

.container{
    width:100%;
    height: 100%;
    position: relative;
}

.texts p{
    color: black;
    font-size: 50px;
    opacity:0;
    position: absolute;
}

.texts > p.show { animation: text-anim 5s;}

@keyframes text-anim {
    0%, 100% {opacity: 0;}
    20%, 80% {opacity: 1;}
}

let i = -1;
let targets = document.querySelectorAll('.texts > p');

document.getElementById("btn").onclick = function() {
  if(i >= targets.length - 1){
    alert('終わり');
  }else{
    if(i > -1){ targets[i].classList.remove("show")}
    i++;
    targets[i].classList.add("show")
  }
}

追記

コメントで、下記の仕様が追加されましたので書き換えました。

• 「前へ」、「次へ」ボタン
• 次へを押して終わりなら、最初に戻す。
• 前へを押して終わりなら、最後に戻す。

let i = -1;
let targets = document.querySelectorAll('.texts > p');

document.getElementById("back-btn").onclick = function() {
  i <= 0 ? i=targets.length - 1 : i--;  
  setShow(i);  
}
document.getElementById("next-btn").onclick = function() {
  i >= targets.length - 1 ? i=0 : i++;  
  setShow(i);  
}
function setShow(i) {
  let el = document.querySelector('p.show');
  if(el){el.classList.remove("show")};
  targets[i].classList.add("show");
}

Comments

[teratailll]

document.getElementById("btn")
↓
document.getElementById("next-btn")
にしたら動きました！
戻るも付けることは可能でしょうか？

[miyabi_pudding]

横槍失礼します。

応用でできるはずなので、
自身でやってみてはいかがでしょうか。

[teratailll]

前へ、次へを付けました

<style>
.container{
width:100%;
height: 100%;
position: relative;
color: white;
}

.texts p{
color: white;
font-size: 50px;
opacity:0;
position: absolute;
}

.texts > p.show { animation: text-anim 5s;}

@keyframes text-anim {
0%, 100% {opacity: 0;}
20%, 80% {opacity: 1;}
}

</style>
<input type="button" value="前へ" id="back-btn">
<input type="button" value="次へ" id="next-btn">
<div class="container">

<div class="texts">
<p>吾輩は猫である 名前はまだ無い</p>
<p>どこで生れたか とんと見当がつかぬ</p>
<p>何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している</p>

</div>
</div>

<script>
let i = -1;
let targets = document.querySelectorAll('.texts > p');
document.getElementById("back-btn").onclick = function() {
if(i >= 0){
i=targets.length-1;
}else{
if(i > 0){ targets[i].classList.remove("show")}
i--;
targets[i].classList.add("show")
}
}
document.getElementById("next-btn").onclick = function() {
if(i >= targets.length - 1){
i=0;
}else{
if(i > -1){ targets[i].classList.remove("show")}
i++;
targets[i].classList.add("show")
}
}
</script>

もし、次へを押して終わりなら、最初に戻す。
もし、前へを押して終わりなら、最後に戻す。

という処理がしたいのですが、動きません
何か間違いありますでしょうか？

[hatena19]

そのような仕様になると、現状のコードでは条件判断が面倒そうなので、一から書き直しました。
回答に追記しましたので参考にしてください。

[teratailll]

すごすぎです
forと書かずi >= targets.length - 1 ? i=0 : i++;でなぜ動くのかも全く理解できませんが
色んな書き方があるんですね、、、
ありがとうございます

[teratailll]

forを使ってるわけではないんですね。。。
ベストアンサーにさせていただきます

[teratailll]

ちなみになぜ、これではなぜ動かなかったんでしょうか？
次へも前へもその終わりを迎えたら0に戻すのと最後に戻す処理であってませんか？

<style>
.container{
width:100%;
height: 100%;
position: relative;
color: white;
}

.texts p{
color: white;
font-size: 50px;
opacity:0;
position: absolute;
}

.texts > p.show { animation: text-anim 5s;}

@keyframes text-anim {
0%, 100% {opacity: 0;}
20%, 80% {opacity: 1;}
}

</style>
<input type="button" value="前へ" id="back-btn">
<input type="button" value="次へ" id="next-btn">
<div class="container">

<div class="texts">
<p>吾輩は猫である 名前はまだ無い</p>
<p>どこで生れたか とんと見当がつかぬ</p>
<p>何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している</p>

</div>
</div>

<script>
let i = -1;
let targets = document.querySelectorAll('.texts > p');
document.getElementById("back-btn").onclick = function() {
if(i >= 0){
i=targets.length-1;
}else{
if(i > 0){ targets[i].classList.remove("show")}
i--;
targets[i].classList.add("show")
}
}
document.getElementById("next-btn").onclick = function() {
if(i >= targets.length - 1){
i=0;
}else{
if(i > -1){ targets[i].classList.remove("show")}
i++;
targets[i].classList.add("show")
}
}
</script>

[hatena19]

i >= targets.length - 1 ? i=0 : i++; に関しては「js 三項演算子」「js if ショートハンド」あたりをキーワードに検索すると解説が見つかります。if文が1行で書ける便利なものです。

コードが想定通りに動かない原因を特定する作業をデバッグといいますが、ここはご自身でデバッグ作業をして原因を特定することをお勧めします。その方が確実にスキルアップになります。
やり方が分からなければ「js デバッグ」で検索してみてください。