ロード時に一時的に行の背景色を変更するCSS。

Question

私はトランジションやアニメーションなどのあらゆる種類のメソッドを使用してこのようなことを得る例をたくさん見つけましたが、私の特定のユースケースではうまくいかないようです。私は、一時的にページの読み込み時に要素の背景色を強調/変更できるようにしたいと思います。私は特に、要素のホバー上でイージー・イン・アウト・トランジションを使用して行をホバリングしたときにうまく動作するようにしました。これはうまく動作しますが、ページの負荷に対してはこれを動作させることができません。

具体的には、私が選択した特定の行（私はすでにJSを使用しています）をページロード時に一度点滅させる必要があります。このCSSを自分の行に追加するにはどうすればよいですか？ここで

は、私がホバリングのために使用するコードです：

.FoodConsumptionTable tr { 
    background-color: white; 
    transition: background-color .75s ease-in-out; 
    -moz-transition: background-color .75s ease-in-out; 
    -webkit-transition: background-color .75s ease-in-out; 
} 

.FoodConsumptionTable tr:hover { 
    background-color: #d2f9f3; 
} 

は、ここで私はそれを試してみて、強調するために、正しい行を選択しています方法は次のとおりです。

var newRowId = $('#<%=hdnNewRowID.ClientID %>').val();   
$("input:hidden[value='" + newRowId + "']").eq(1).parent().parent().addClass("NewGridRow"); 

Answer 1

これを行う最も簡単な方法は、animation.です。要素とCSSが読み込まれるとすぐにアニメーションが再生されます。

html, body { 
 
    background-color: #333; 
 
} 
 

 
@keyframes FadeIn { 
 
    from { 
 
    background-color: #d2f9f3; 
 
    } 
 
    
 
    to { 
 
    background-color: white; 
 
    } 
 
} 
 

 
.FoodConsumptionTable tr { 
 
    background-color: white; 
 
    animation: FadeIn 0.75s ease-in-out forwards; 
 
}

<table class="FoodConsumptionTable"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Apple</td> 
 
     <td>Orange</td> 
 
     <td>Banana</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

はtransitionsとは異なり、アニメーションは、その変更をオフ発射する状態の変化を必要としません。

Answer 2

.someSelector{ 
    background-color: blue; 
    animation-name: animationName; 
    animation-duration: 2s; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1;  
    animation-play-state: running; 
} 

@keyframes animationName { 
    0% {background-color:blue;} 
    100% {background-color:red;} 
} 

たぶん、あなたは使用することができますキーフレームアニメーション？

Answer 3

すでに行の参照があるので、私の好きな方法は、jquery拡張を呼び出してパルスします。

jquery-uiが.effect用に読み込まれている場合にのみ使用し、必要に応じて使いやすさを変更できます。

$.fn.pulseHighlight = 
    function (duration) { 
     return this.each(function() { 
      $(this).effect("highlight", { color: '#00AA00' }, duration || 1000); 
     }); 
    }; 


var newRowId = $('#<%=hdnNewRowID.ClientID %>').val();   
$("input:hidden[value='" + newRowId + "']").eq(1).parent().parent().pulseHighlight(); 

注意しなければならないのは、cssクラスだけでなく、色の値を使用する必要があることです。

Answer 4

私が正しく理解したら、​​または.ready()イベントを使用して、この場合は背景色の要素にCSSを適用できます。 Joonas89

で述べたように、あなたはまた、タイムアウトを設定し、ページのロード時にそのクラスを追加し、その後、あなたが考えている背景色を持つクラスを持っていることについてはjQueryを通じて

$(document).ready(function(){ 
 
    $('#select-me').css('background-color','blue'); 
 
});

#select-me{ 
 
    width: 80px; 
 
    height:40px; 
 
    background-color: red; 
 
}

<div id="select-me"></div>