Эффективный способ манипулирования детьми DOM

Question

Моя цель - получить рандомизированный эффект блеска для определенного текста, используя CSS animation. У меня уже есть рабочий код, просто хочу узнать, есть ли более эффективное/простое решение.

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"); 

Для того, чтобы анимация смотреть правильно, она должна быть выше элемента/текст. Наличие его на том же элементе отбросит его. Я пробовал использовать ::before, но я не могу выбрать его с помощью JS, поскольку он фактически не существует в DOM.

Это должно применяться к множеству элементов и текста внутри <span> изменяется так часто.

JSFiddle

Answer 1

В качестве альтернативы может быть, чтобы создать и непосредственно управлять таблицу стилей в JavaScript. Таким образом, итерация по элементам обрабатывается браузером, а не javascript.

Настройка такой таблицы стилей описана в примерах MDN CSSStyleSheet.insertRule().

Существует также jQuery library для таких манипуляций.

И 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>