ボタンをクリックしてアニメーションを繰り返します。

Question

ボタンをクリックするたびにアニメーションを繰り返したいと思います。私は何かしようとしたlike this。

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    dist.classList.remove('animation'); 
 
    dist.classList.add('animation'); 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
    transition: transform 3s; 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>

しかし実際には、このスニペットは、それが一度だけ行います。

dist.classList.remove('animation'); 
dist.classList.add('animation'); 

この部分は状態を削除して最初からアニメーション化してはいけませんか？

Answer 1

クラスの変更がバッチ処理中です。あなたは戻っ要素にクラスを追加するアニメーションフレームを要求する必要があります

window.requestAnimationFrame(function() { 
    dist.classList.add('animation'); 
}); 

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    dist.classList.remove('animation'); 
 
    window.requestAnimationFrame(function() { 
 
    dist.classList.add('animation'); 
 
    }); 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
    transition: transform 3s; 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>

Docs for requestAnimationFrame

はupdated Fiddle

Answer 2

Updated fiddleを参照してください。あなたは新しいクラスanimation（ほんの少しのタイムアウトはトリックを行います）を追加する前に、余分な時間を削除与えるべき

：

dist.classList.remove('animation'); 

setTimeout(function(){ 
    dist.classList.add('animation'); 
},10); 

は、この情報がお役に立てば幸いです。

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    dist.classList.remove('animation'); 
 

 
    setTimeout(function(){ 
 
    dist.classList.add('animation'); 
 
    },10); 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
    transition: transform 3s; 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>

Answer 3

もう時間が発生するアニメーションのためにそこに存在しないので、これは動作しません。基本的に、ブラウザは、クラスが削除されたことに気づくことはありません。それがアニメーション化されないように、変化を見る時間がありません。それを繰り返すためには通知する時間を与える必要がありますが、setTimeoutがこれに適しています。

また、小さなサイズに戻ってアニメーション化する場合は、どのクラスを変更する必要がありますか？transitionタイミングです。あなたが追加されたクラスでそれを持っているなら、一度削除すればタイミングが失われ、小さなサイズにスナップバックします。

アニメーションが返ってくるのを気にしない場合は、CSSを同じにして、タイムアウトを100のように短く変更してください。

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    if(!dist.classList.contains('animation')){ 
 
    dist.classList.add('animation'); 
 
    } else { 
 
    dist.classList.remove('animation'); 
 
    // Add it back after 3 seconds; 
 
    setTimeout(function(){ 
 
     dist.classList.add('animation'); 
 
    }, 1000 * 3); 
 
    } 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
    transition: transform 3s; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>

：

は次のように何かを試してみてください