2

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?

Skyrimann
  • 25
  • 3
  • https://stackoverflow.com/questions/4481485/changing-css-pseudo-element-styles-via-javascript/12207551#answer-8051488 – morganney Dec 21 '21 at 04:29

2 Answers2

1

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>
ngearing
  • 1,325
  • 11
  • 18
1

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" class="typehereclass">Here</P>

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

element.classList.remove('typehereclass')
gbac
  • 235
  • 3
  • 12
  • Using "element.classList.remove('typehereclass')" doesn't have code reusability. However using "element.classList.remove(element.className)" works, but throws errors (But still works?) Otherwise this is a simpler method. – Skyrimann Dec 21 '21 at 04:59