向动态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>