在新創建的元素上的CSS過渡

Question

我有一個頁面，我想要動態更改元素的背景顏色，然後通過ajax調用重新創建元素。因此，我添加的任何類或內聯CSS都會在第二秒左右被替換。

由於新創建的元素從已經定義的背景顏色樣式開始，所以它沒有任何變化從，因此沒有轉換。到目前爲止，我還沒有找到一個可行的解決方法。 爲了這個問題，請假定我無法控制由ajax調用創建的元素的時間和/或內容。

$('#change-by-class').on('click', function() { 
 
    $(this).addClass('green'); 
 
}); 
 
$('#change-by-dom').on('click', function() { 
 
    $('#new-style').html('#change-by-dom { background-color: lightgreen; }'); 
 

 
    // THIS PART IS SIMLULATING AN AJAX EVENT WHICH I DO NOT HAVE CONTROL OVER - ASSUME YOU CANNOT CHANGE IT 
 
    setTimeout(function() { 
 
    $('#change-by-dom').remove(); 
 
    $('<div id="change-by-dom">Click to Change Color by DOM</div>').appendTo('#container'); 
 
    }, 300); 
 
});

#container > div { 
 
    -webkit-transition: background-color 1000ms linear; 
 
    -moz-transition: background-color 1000ms linear; 
 
    -o-transition: background-color 1000ms linear; 
 
    -ms-transition: background-color 1000ms linear; 
 
    transition: background-color 1000ms linear; 
 
    padding: 20px; 
 
    margin: 10px; 
 
    width: 50%; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    border: 1px solid #000; 
 
} 
 
.green { 
 
    background-color: lightgreen 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<style id="new-style"></style> 
 
<div id="container"> 
 
    <div id="change-by-class">Click to Change Color by Class</div> 
 
    <div id="change-by-dom">Click to Change Color by DOM</div> 
 
</div>

Answer 1

你可以這樣做

$('#change-by-class').on('click', function() { 
 
    $(this).addClass('green'); 
 
}); 
 
$('#change-by-dom').on('click', function() { 
 
    $('#new-style').html('#change-by-dom { animation: bkg 1s linear forwards; }'); 
 
    $('#change-by-dom').remove(); 
 
    $('<div id="change-by-dom">Click to Change Color by DOM</div>').appendTo('#container'); 
 
});

#container > div { 
 
    padding: 20px; 
 
    margin: 10px; 
 
    width: 50%; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    border: 1px solid #000; 
 
} 
 
.green { 
 
    transition: background-color 1000ms linear; 
 
    background-color: lightgreen 
 
} 
 

 
@keyframes bkg { 
 
    100% { 
 
    background-color: green; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<style id="new-style"></style> 
 
<div id="container"> 
 
    <div id="change-by-class">Click to Change Color by Class</div> 
 
    <div id="change-by-dom">Click to Change Color by DOM</div> 
 
</div>

Answer 2

$('#change-by-class').on('click', function() { 
 
    $(this).addClass('green'); 
 
}); 
 

 
$('#change-by-dom').on('click', function() { 
 
    $('#new-style').html('#change-by-dom { background-color: lightgreen; }'); 
 
    $('#change-by-dom').remove(); 
 
    var $elem = $('<div id="change-by-dom">Click to Change Color by DOM</div>').appendTo('#container'); 
 
    $elem.css({ 'background-color': 'white', 'transition': 'none' }).width(); 
 
    $elem.css({ 'background-color': '', 'transition': '' }) 
 
});

#container > div { 
 
    -webkit-transition: background-color 1000ms linear; 
 
    -moz-transition: background-color 1000ms linear; 
 
    -o-transition: background-color 1000ms linear; 
 
    -ms-transition: background-color 1000ms linear; 
 
    transition: background-color 1000ms linear; 
 
    padding: 20px; 
 
    margin: 10px; 
 
    width: 50%; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    border: 1px solid #000; 
 
} 
 
.green { 
 
    background-color: lightgreen 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<style id="new-style"></style> 
 
<div id="container"> 
 
    <div id="change-by-class">Click to Change Color by Class</div> 
 
    <div id="change-by-dom">Click to Change Color by DOM</div> 
 
</div>