添加轉換到動態DOM元素

Question

我想添加轉換到div元素。 Transition成功應用於第一個添加的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

您需要更新的$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>

Answer 2

您需要的代碼存儲所留，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>