Halting CSS animation with ::after selector in JavaScript

December 21, 2021

I have a JavaScript function that types out, letter by letter, a message. However, where the current character to be typed is located, I have a blinking css animation. What I need is to stop this animation and make it disappear.

I am using a css with #id::after to put the animation after the text in question. The animation works fine, I need a way to set content: '█'; to content: ''; via JavaScript.

(function type_p(){
    let msg = 'This is a message to type out! Spooky!';
    let element = document.getElementById('typehere');
    typeOut(msg, '', 0, element);
    
}());

function typeOut(text, letter, index, element){
    letter = text.slice(0, ++index);
    element.textContent = letter;

    if (letter.length == text.length){
        stop();
    }
    setTimeout(typeOut, 100, text, letter, index, element);
}

#typehere {
    position: relative;
}

#typehere::after {
    content: '█';
    position: absolute;
    animation: blink 1.5s infinite;
    /* animation-iteration-count: 2; */
}

@keyframes blink {
    0% {
        opacity: 0;
    }
        50% {
        opacity: 1;
    }
    51% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

<p id="typehere">Here</P>

I am aware of CSS animation-iteration-count: however this will stop the animation but it will still be visible (motionless). How do I remove this?

>Solution :

I would just add a class to your element and change the content based on class.

(function type_p(){
    let msg = 'This is a message to type out! Spooky!';
    let element = document.getElementById('typehere');
    typeOut(msg, '', 0, element);
    
}());

function typeOut(text, letter, index, element){
    letter = text.slice(0, ++index);
    element.textContent = letter;

    if (letter.length == text.length){
        element.classList.add('stop');
        stop();
    }
    setTimeout(typeOut, 100, text, letter, index, element);
}

#typehere {
    position: relative;
}

#typehere::after {
    content: '█';
    position: absolute;
    animation: blink 1.5s infinite;
    /* animation-iteration-count: 2; */
}
#typehere.stop::after {
    content: '';
}

@keyframes blink {
    0% {
        opacity: 0;
    }
        50% {
        opacity: 1;
    }
    51% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}