Effiziente Möglichkeit, DOM-Childs zu manipulieren

Question

Mein Ziel ist es, einen zufälligen Glanzeffekt auf bestimmten Text mit CSS animation zu erhalten. Ich habe bereits einen Arbeitscode, möchte nur wissen, ob es eine effektivere/einfache Lösung gibt.

HTML:

<span class="foo"> 
    <span class="bar"> 
    </span> 
</span> 

CSS:

@keyframes masked-animation { 
    0% {background-position: -1000px 0} 
    50% {background-position: 1000px 0} 
    100% {background-position: 1000px 0} 
} 

.foo{ 
    text-align: center; 
    font-size: 40px; 
    font-weight: bold; 
    display: block; 
    color: red; 
    position: absolute; 
} 

.bar{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    color: rgba(0,0,0,0); 
    background-image: linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.67) 48%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.67) 52%, rgba(255,255,255,0) 100%); 
    background-repeat: no-repeat; 
    -webkit-background-clip: text; 
    animation-name: masked-animation; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    background-size: 400% 100%; 
} 

JS:

$('.foo')[0].childNodes[0].nodeValue = "Text"; 
$('.foo > .bar').css({ 
    "animation-duration" : 8 + Math.round(Math.random()*40)/10 + "s", 
    "animation-delay" : Math.round(Math.random()*100)/10 + "s" 
}).text("Text"); 

Damit die Animation korrekt zu sehen, muss es über dem Element/Text sein. Wenn Sie es auf demselben Element haben, wird es dahinter zurückbleiben. Ich versuchte mit ::before, aber ich kann es nicht mit JS auswählen, da es tatsächlich nicht im DOM existiert.

Dies muss auf mehrere Elemente und Text innerhalb <span> Änderungen so oft angewendet werden.

JSFiddle

Answer 1

Eine Alternative kann direkt ein Stylesheet in Javascript erstellen und bearbeiten. Auf diese Weise wird das Iterieren über die Elemente durch den Browser und nicht in Javascript gehandhabt.

Das Einrichten eines solchen Stylesheets wird in den Beispielen CSSStyleSheet.insertRule() von MDN beschrieben.

Es gibt auch eine jQuery library für diese Art von Manipulationen.

Und ein working example:

var styleElement = document.createElement('style'); 
 
document.head.appendChild(styleElement); 
 

 
var styleSheet = styleElement.sheet, 
 
    ruleIdx = styleSheet.insertRule('.target{}',styleSheet.cssRules.length), 
 
    rule = styleSheet.cssRules[ruleIdx], 
 
    colorize = function() { 
 
     var color = Math.random() * 360; 
 
     rule.style.color = 'hsl('+color+',100%,50%)'; 
 
    }, 
 
    interval = setInterval(colorize,1000); 
 
colorize();

<div class="target" style="font-size:5em;font-weight:bold;font-family:sans-serif">TEST</div>