CSSのアニメーションは、要素のフォーカスが失われたときにのみ発生します。

Question

ユーザーがajaxで値を変更できるドロップダウンフィールドがあります。変更イベントが発生し、データがデータベースに保存されると、ドロップダウンフィールドを含む行が緑色に輝くように視覚的な「成功フィードバック」が表示されます。 これまでのところうまくいきますが、グローのアニメーション（css）は、行がフォーカスを失った場合にのみ発生します。マウスで行の外に移動した場合（クリックする必要はありません）。私はどんなアドバイスも感謝します。多分私はどのように私はこのグローをやっているの全体のコンセプトは間違っている（それを "成功"アヤックスコールで入れて）です。

のjavascript：

$("[name='dropdown_status']").on('change', function() { 
      var tr = $(this).closest('tr'); 
      var bestell_id = $(this).attr('id'); 
      $.ajax({ 
       type: 'POST', 
       url: '/files/ajax/wm_change_status_dt.php', 
       data: { 
        id_bestell: bestell_id, 
        id_status: $(this).val() 
       }, 
       success: function(data) { 
        tr.addClass('dropdown_anim'); 
        tr.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 
         tr.removeClass('dropdown_anim'); 
        }); 
       }, 
       error: function(jqXHR, status, err) { 
        alert(status + ': ' + err); 
       } 
      }); 
     } 

はCSS：

.dropdown_anim { 
    background: transparent; 
    animation: color-me-in 1s; 
} 

@keyframes color-me-in { 
0% { 
    background: transparent; 
    } 
    /* Adding a step in the middle */ 
    50% { 
    background: #D3FCC7; 
    } 
    100% { 
    background: transparent; 
    } 
} 

Answer 1

構文（とドロップダウン要素ID dropdown_statusを追加）

$(document).on("change", "#dropdown_status", function() { 
      var tr = $(this).closest('tr'); 
      var bestell_id = $(this).attr('id'); 
      $.ajax({ 
       type: 'POST', 
       url: '/files/ajax/wm_change_status_dt.php', 
       data: { 
        id_bestell: bestell_id, 
        id_status: $(this).val() 
       }, 
       success: function(data) { 
        tr.addClass('dropdown_anim'); 
        tr.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 
         tr.removeClass('dropdown_anim'); 
        }); 
       }, 
       error: function(jqXHR, status, err) { 
        alert(status + ': ' + err); 
       } 
      }); 
     } 

Answer 2

オーケー、次の試してみてくださいでは、それを得た： は、判明しましたすべてがうまくいきました。唯一の問題は、tablerowがホバリングされたときに発せられたCSSコードです（背景色を変更する）。したがって、緑色のグロー効果は表示されませんでした。または、行がフォーカスを失うとすぐに表示されました。