Halting CSS animation with ::after selector in JavaScript-CodePudding

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?

CodePudding user response：

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;
    }
}

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

CodePudding user response：

This is similar to the other answer, but I find it easier/cleaner than adding multiple classes to something that will no longer be visible.. You can add the animation styling as a class, and then remove that class when you no longer want it to animate.

Change to class in css:

.typehereclass::after {
    content: '█';
    position: absolute;
    animation: blink 1.5s infinite;
}

Add the class to your element in html:

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

And then when you want to stop the blinking in JS:

element.classList.remove('typehereclass')