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>

新创建元素的CSS转换

2 个答案: