如何动画克隆的元素？

Question

我想要做的是环状水平文本滑块。 我的尝试 - 显示文本结尾时，将此元素移动到右端并再次播放克隆元素的动画 - 但我无法实现该目的，因为由于某种原因克隆的元素不想进行动画制作。

这是铬唯一的应用程序

这里是jsfiddle。

CSS

#elm { 
    width: 100px; 
    height:20px; 
    overflow: auto; 
    overflow-y: hidden; 
    position:absolute; 
    top:10px; 
    left:10px; 
} 

#elm::-webkit-scrollbar { width: 0 !important; height: 0 !important; } 
#elm .inner-elm { 
    position:absolute; 
    white-space: nowrap; 
} 

HTML

<div id="elm"> 
    <div class="inner-elm"> 11111111 2222222 333333 4444444</div> 
</div> 

JS

var elm_right = $('#elm').offset().left + $('#elm').outerWidth(); 

var settings = { 
    duration: 5000, 
    easing: 'linear', 
    step: function() { 
     var this_right = $(this).offset().left + $(this).outerWidth(); 

     // make some clone 
     if(!$(this).hasClass('cloned') && ((this_right + 50) < elm_right)) { 
     $(this).addClass('cloned'); 

     var clone = $(this).clone(true); 
     clone.addClass('cloned') 
      .css('left', $('#elm').width()) 
      .appendTo('#elm') 
      .animate({right:100}, settings); 
     } 


     // remove parent 
     if((this_right - 20) < $('#elm').offset().left) { 
     $(this).remove(); 
     } 

    } 
}; 

var that = $('#elm .inner-elm'); 
that.animate({right: that.outerWidth()}, settings); 

Answer 1

你可以使用CSS3过渡为一个简单的动画这样。 fiddle

var interval = 2000; 
 
var nextTimeout = 200; 
 
var wrapper = $('#elm'); 
 
var elem = $('.inner-elm', wrapper); 
 
elem.addClass('move'); 
 

 
setInterval(function(){ 
 
    var clone = elem.clone(true); 
 
    elem.remove(); 
 
    elem = clone; 
 
    elem.removeClass('move'); 
 
    wrapper.append(elem); 
 
    setTimeout(function(){ 
 
    \t elem.addClass('move'); 
 
    }, nextTimeout); 
 
}, interval);

#elm { 
 
    height:20px; 
 
    overflow: auto; 
 
    overflow-y: hidden; 
 
    position:absolute; 
 
    top:10px; 
 
    left:10px; 
 
} 
 

 
.inner-elm{ 
 
    transition: all 2s linear; 
 
    -ms-transform: translate(110%, 0); /* IE 9 */ 
 
    \t -webkit-transform: translate(110%x, 0); /* Safari */ 
 
    transform: translate(110%, 0); 
 
} 
 

 
.move{ 
 
    -ms-transform: translate(-130%, 0); /* IE 9 */ 
 
    \t -webkit-transform: translate(-130%, 0); /* Safari */ 
 
    transform: translate(-130%, 0); 
 
} 
 

 
#elm::-webkit-scrollbar { width: 0 !important; height: 0 !important; } 
 
#elm .inner-elm { 
 
    position:relative; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="elm"> 
 
    <div class="inner-elm">Stackoverflow</div> 
 
</div>