Safari не может обрабатывать анимацию l oop 200 объектов - PullRequest
Новая
       53

Safari не может обрабатывать анимацию l oop 200 объектов

0 голосов
/ 21 июня 2020

мой код отлично работает в chrome, mozilla, как windows, так и android, но всегда cra sh на safari ios (iPad и IPhone), прямо перед анимацией l oop запускается 

$button.on('click', function() {
    setTimeout(function() {

       for ( i = 0; i <= 200; i++ ){

       var angle = Math.random()*Math.PI*2;

       var radius = Math.random()*115;

       var posx = Math.cos(angle)*radius + 390;
       var posy = Math.sin(angle)*radius + 600;

       var svg = d3.select('#container')
        .append('svg')
        .attr('width', 560)
        .attr('height',850)
        .style('position', 'absolute')

       var g = svg
        .append('g')
        .style('stroke', '#262626')
        .style('stroke-width', 2)
        .style('opacity', 0)
        .attr('transform', 'translate(280,240) scale(0.01)');

       g.each(function(){
        d3.select(this)
        .raise()
        .transition()
        .duration((Math.random() * 4000) + 3000)
        .ease(d3.easeExp)
        .style('opacity' , 1)
        .attr('transform', 'translate('+ posx +','+ posy +') scale(0.15)');
       });

       g.selectAll('path')
        .data(pathdata) // path data variable, contain svg paths
        .enter()
        .append('path')
        .attr('d', d => d.d ) // path data variable
        .style('fill', 'white' );

    } //endforloop
},14500)
}

И когда я изменяю условие для l oop на i <= 10 (я еще не тестирую максимальный предел объекта, который может обрабатывать Safari), тогда он отлично работает в Safari. Интересно, как мне заставить 200 объектов правильно работать в Safari ??

...