Question

我正在尝试向div元素添加转换。 Transition已成功应用于第一个添加的div元素。当我通过点击.container添加更多div时，这些新div没有这个动画。 如何向动态div添加转场？

以下是我的代码

＆＃13;

    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();

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要为每个矩形存储左，x和过渡。拥有相同的左边，x和所有它们的过渡将意味着它们在任何时间点都将处于相同的位置。

＆＃13;

    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();

＆＃13;

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

＆＃13;

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

＆＃13;

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>

添加到动态DOM元素的转换

2 个答案: