在 JavaScript 中使用 ::after 选择器停止 CSS 动画答案

【问题标题】：Halting CSS animation with ::after selector in JavaScript在 JavaScript 中使用 ::after 选择器停止 CSS 动画
【发布时间】：2022-01-22 14:09:04
【问题描述】：

我有一个 JavaScript 函数，可以逐字输入一条消息。但是，在当前要输入的字符所在的位置，我有一个闪烁的 css 动画。我需要的是停止这个动画并让它消失。

我正在使用带有 #id::after 的 css 将动画放在相关文本之后。动画效果很好，我需要一种通过 JavaScript 将 content: '█'; 设置为 content: ''; 的方法。

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

&lt;p id="typehere"&gt;Here&lt;/P&gt;

我知道 CSS animation-iteration-count: 但是这会停止动画，但它仍然可见（静止）。如何删除它？

【问题讨论】：

stackoverflow.com/questions/4481485/…

标签： javascript css

【解决方案1】：

我只是为你的元素添加一个类并根据类更改内容。

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

&lt;p id="typehere"&gt;Here&lt;/P&gt;

【讨论】：

【解决方案2】：

这与其他答案类似，但我发现它比将多个类添加到不再可见的东西更容易/更干净。您可以将动画样式添加为一个类，然后在没有时删除该类不再希望它动画。

更改为css中的类：

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

将类添加到 html 中的元素中：

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

然后当你想在 JS 中停止闪烁时：

element.classList.remove('typehereclass')

【讨论】：

使用“element.classList.remove('typehereclass')”不具备代码可重用性。但是使用“element.classList.remove(element.className)”可以工作，但会引发错误（但仍然有效？）否则这是一个更简单的方法。