向動態DOM元素添加過渡

Question

我試圖添加過渡到div元素。 過渡成功應用於第一個添加的div元素。 當我通過單擊.container添加更多div時，這些新的div沒有此動畫。 如何向動態div添加過渡？

下面是我的代碼

  var transition = 1; var x = 0; var left = 0; draw('white'); var $rect = $('.rect'); var $container = $('.container'); var arr = ['red', 'green', 'black']; var count = 0; $('body').on('click', function () { draw(arr[count]); count++; }); function init () { setInterval(onEachStep, 1000/60); } function onEachStep () { x += transition; left = left + transition; $rect.css('left', left + 'px'); if (x > $container.outerWidth() - $rect.outerWidth()) { transition = -10; } if (x < 0) { transition = 1; } } function draw (color) { var rect = $('<div />', { 'class': 'rect' }); rect.css('background', color); rect.appendTo('.container'); } init(); 

 .container { background: lightblue; height: 300px; } .rect { width: 50px; height: 20px; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container"></div> 

Answer 1

您需要為每個矩形存儲left，x和transition。 如果所有元素都具有相同的x，x和過渡，則它們在任何時間點都將位於相同的位置。

  draw('white'); var $container = $('.container'); var arr = ['red', 'green', 'black']; var count = 0; $('body').on('click', function () { draw(arr[count%arr.length]); count++; }); function init () { setInterval(onEachStep, 1000/60); } function onEachStep () { $rect = $('.rect'); for(var i = 0; i < $rect.length; i++) { var thisrect = $rect[i]; thisrect.x += thisrect.transition; thisrect.left += thisrect.transition; $(thisrect).css('left', thisrect.left + 'px'); if (thisrect.x > $container.outerWidth() - $(thisrect).outerWidth()) { thisrect.transition = -10; } if (thisrect.x < 0) { thisrect.transition = 1; } } } function draw (color) { var rect = $('<div />', { 'class': 'rect' }); rect.css('background', color); rect[0].x = 0; rect[0].left = 0; rect[0].transition = 1; rect.appendTo('.container'); } init(); 

 .container { background: lightblue; height: 300px; } .rect { width: 50px; height: 20px; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container"></div> 

Answer 2

您必須為此更新$rect變量。 在下面找到代碼

  var transition = 1; var x = 0; var left = 0; draw('white'); var $rect = $('.rect'); var $container = $('.container'); var arr = ['red', 'green', 'black']; var count = 0; $('body').on('click', function () { draw(arr[count]); count++; $rect = $('.rect'); }); function init () { setInterval(onEachStep, 1000/60); } function onEachStep () { x += transition; left = left + transition; $rect.css('left', left + 'px'); if (x > $container.outerWidth() - $rect.outerWidth()) { transition = -10; } if (x < 0) { transition = 1; } } function draw (color) { var rect = $('<div />', { 'class': 'rect' }); rect.css('background', color); rect.appendTo('.container'); } init(); 

 .container { background: lightblue; height: 300px; } .rect { width: 50px; height: 20px; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container"></div>