Add transition to dynamic DOM element

Question

I am trying to add transition to div element. Transition is applied successfully to first added div element. When I add more divs by clicking on .container then these new divs do not have this animation. How can I add transitions to dynamic divs?

Below is my code

    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

You need to store left, x and transition for each rectangle. Having the same left, x and transition for all of them would mean they all will be at the same position on any point in time.

    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

You have to update the $rect variable for that. find the code below

    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>