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を使ってみましたが、実際にはDOMに存在しないためJSで選択できません。

これは、頻繁に変更される<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>