133 lines
4.8 KiB
JavaScript
133 lines
4.8 KiB
JavaScript
document.getElementById('transition-1').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('transition-1');
|
|
var paraB = document.getElementById('chat-1');
|
|
paraA.classList.remove('fade-in-top');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('typing');
|
|
});
|
|
|
|
document.getElementById('chat-1').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('chat-1');
|
|
var paraB = document.getElementById('transition-2');
|
|
paraA.classList.remove('typing');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('fade-in-top');
|
|
});
|
|
|
|
document.getElementById('transition-2').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('transition-2');
|
|
var paraB = document.getElementById('transition-3');
|
|
paraA.classList.remove('fade-in-top');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('fade-in-top');
|
|
});
|
|
|
|
document.getElementById('transition-3').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('transition-3');
|
|
var paraB = document.getElementById('chat-2');
|
|
paraA.classList.remove('fade-in-top');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('typing');
|
|
});
|
|
|
|
document.getElementById('chat-2').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('chat-2');
|
|
var paraB = document.getElementById('transition-4');
|
|
paraA.classList.remove('typing');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('fade-in-top');
|
|
});
|
|
|
|
document.getElementById('transition-4').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('transition-4');
|
|
var paraB = document.getElementById('chat-3');
|
|
paraA.classList.remove('fade-in-top');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('typing');
|
|
});
|
|
|
|
document.getElementById('chat-3').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('chat-3');
|
|
var paraB = document.getElementById('transition-5');
|
|
paraA.classList.remove('typing');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('fade-in-top');
|
|
});
|
|
|
|
document.getElementById('transition-5').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('transition-5');
|
|
var paraB = document.getElementById('chat-4');
|
|
paraA.classList.remove('fade-in-top');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('typing');
|
|
});
|
|
|
|
document.getElementById('chat-4').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('chat-4');
|
|
var paraB = document.getElementById('transition-6');
|
|
paraA.classList.remove('typing');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('fade-in-top');
|
|
});
|
|
|
|
document.getElementById('transition-6').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('transition-6');
|
|
var paraB = document.getElementById('chat-5');
|
|
paraA.classList.remove('fade-in-top');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('typing');
|
|
});
|
|
|
|
document.getElementById('chat-5').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('chat-5');
|
|
var paraB = document.getElementById('transition-7');
|
|
paraA.classList.remove('typing');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('fade-in-top');
|
|
});
|
|
|
|
document.getElementById('transition-7').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('transition-7');
|
|
var paraB = document.getElementById('chat-6');
|
|
paraA.classList.remove('fade-in-top');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('typing');
|
|
});
|
|
|
|
document.getElementById('chat-6').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('chat-6');
|
|
var paraB = document.getElementById('transition-8');
|
|
paraA.classList.remove('typing');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('fade-in-top');
|
|
});
|
|
|
|
document.getElementById('transition-8').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('transition-8');
|
|
var paraB = document.getElementById('chat-7');
|
|
paraA.classList.remove('fade-in-top');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('typing');
|
|
});
|
|
|
|
document.getElementById('chat-7').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('chat-7');
|
|
var paraB = document.getElementById('transition-9');
|
|
paraA.classList.remove('typing');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('fade-in-top');
|
|
});
|
|
|
|
document.getElementById('transition-9').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('transition-9');
|
|
var paraB = document.getElementById('chat-8');
|
|
paraA.classList.remove('fade-in-top');
|
|
paraB.classList.remove('hidden');
|
|
paraB.classList.add('typing');
|
|
});
|
|
|
|
document.getElementById('chat-8').addEventListener('animationend', () => {
|
|
var paraA = document.getElementById('chat-8');
|
|
paraA.classList.remove('typing');
|
|
});
|