フェードイン

Question

私は、次のCSSを使用してゼブラストライプされたデータの行数、とテーブルを持っている：

#datatable tr:nth-child(odd) { 
background-color: #fff; 
} 

#datatable tr:nth-child(even) { 
background-color: #fafafa; 
} 

テーブル内のデータを継続的にAJAX呼び出しを介して更新されますデータが変更された特定の行に一時的なハイライトを追加する必要があります。

データ値が減少している場合は赤、データ値が増加している場合は緑、望み通りにフェードインして1〜2秒間滞在した後、再び元の行の色にフェードバックします。

jQueryとCSSを使用しています。

$('#row_id').addClass("temphighlight"); 
setTimeout(clearHighlighting, 3000); 

function clearHighlighting(){ 
$("#row_id").removeClass("temphighlight"); 
} 

#datatable tr.temphighlight { 
background-color: #c6efce; 
transition: background 1.0s ease; 
} 

これはフェードインで機能しますが、遅延後はすぐにCSSクラスが削除され、フェードアウトはありません。

どのようにしてこのハイライトをより効果的にすることができますか？フェードインしてフェードアウトしますか？

私は同じようないくつかの質問をチェックしましたが、回答がうまくいかない、または適用されない - フェードを白くアニメートするように提案されています。行ストライピングのために異なっている。

Answer 1

このようなものはありますか？

.table{ 
 
    border: 1px solid #eee; 
 
} 
 

 
.table .row{ 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.table .row:nth-child(odd) { 
 
background-color: #fff; 
 
} 
 

 
.table .row:nth-child(even) { 
 
background-color: #fafafa; 
 
} 
 

 
.table .row.increased{ 
 
    animation: 1s increased; 
 
} 
 

 
.table .row.decreased{ 
 
    animation: 1s decreased; 
 
} 
 

 
@keyframes increased{ 
 
    0%{ 
 
    background: initial; 
 
    } 
 
    50%{ 
 
    background: #a2ffa9; 
 
    } 
 
    100%{ 
 
    background: initial; 
 
    } 
 
} 
 

 
@keyframes decreased{ 
 
    0%{ 
 
    background: initial; 
 
    } 
 
    50%{ 
 
    background: #ff6f6f; 
 
    } 
 
    100%{ 
 
    background: initial; 
 
    } 
 
}

<div class="table"> 
 
    <div class="row increased"> 
 
    row 
 
    </div> 
 
    <div class="row"> 
 
    row 
 
    </div> 
 
    <div class="row"> 
 
    row 
 
    </div> 
 
    <div class="row decreased"> 
 
    row 
 
    </div> 
 
</div>

Answer 2

だけの要素から削除されていないルールに移行を置きます。この方法だ

setTimeout(function() { 
 
    $('#row_id').addClass("temphighlight"); 
 
    setTimeout(clearHighlighting, 3000); 
 
}, 2000); 
 

 
function clearHighlighting() { 
 
    $("#row_id").removeClass("temphighlight"); 
 
}

#datatable tr { 
 
    transition: background 2.0s ease; 
 
} 
 

 
#datatable tr:nth-child(odd) { 
 
    background-color: #fff; 
 
} 
 

 
#datatable tr:nth-child(even) { 
 
    background-color: #fafafa; 
 
} 
 

 
#datatable tr.temphighlight { 
 
    background-color: #c6efce; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="datatable"> 
 
    <tr> 
 
    <td>One</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Two</td> 
 
    </tr> 
 
    <tr id="row_id"> 
 
    <td>Three</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Four</td> 
 
    </tr> 
 
</table>

Answer 3

？追加するクラスをpulseUpまたはpulseDownのいずれかに変更することができます。値が上がったり下がったりするかどうかによって異なります。

提供されている例の要素をクリックしてみてください。

$("td").click(function() { 
 
\t var element = this; 
 
    $(element).addClass("pulseUp"); 
 
    setTimeout(function() { 
 
     $(element).removeClass("pulseUp"); 
 
    },500); 
 
});

#datatable tr:nth-child(odd) { 
 
background-color: #fff; 
 
} 
 

 
#datatable tr:nth-child(even) { 
 
background-color: #fafafa; 
 
} 
 

 
.pulseUp{ 
 
    animation-name: pulseUp; 
 
    animation-duration: 0.5s; 
 
    animation-timing-function: ease; 
 
} 
 

 
.pulseDown { 
 
    animation-name: pulseDown; 
 
    animation-duration: 0.5s; 
 
    animation-timing-function: ease; 
 
} 
 

 
@keyframes pulseUp { 
 
    50% { 
 
    background-color: green; 
 
    } 
 
} 
 

 
@keyframes pulseDown { 
 
    50% { 
 
    background-color: red; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="datatable"> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>hello</td> 
 
    <td>mr</td> 
 
    <td>Smith</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Goodbye</td> 
 
    <td>Sir</td> 
 
    <td>Smith</td> 
 
    </tr> 
 
</table>

Answer 4

あなたは不透明あなたがの50％に＃のc6efce` `に`背景color`を変更するために使用 `キーフレーム-animation`を使用することができます

myFunction(); 
var val = 1.0; 
function myFunction() { 

val -= 0.02; 
    $('.myDiv').css("opacity", val); 
    setTimeout(myFunction, 20); 
} 

https://codepen.io/piscu/pen/LOzNqa