Anime.js - Обновление морфируемого пути по клику для Safari 6

Обновление морфируемого пути по клику. Путь находится в массиве. Это работает для всех браузеров, но НЕ в Safari 6. В этой версии safari путь только анимируется при загрузке страницы. Не когда я нажимаю на кнопку.

HTML

<div class="js-button" data-index="1" data-type="shape_one">Step 1</div>
<div class="js-button" data-index="2">Step 2</div>
<div class="js-button" data-index="3" data-type="shape_one">Step 3</div>
<div class="js-button" data-index="4">Step 4</div>
<div class="js-button" data-index="5" data-type="shape_one">Step 5</div>

JS

$('body').on('click', '.js-button', function(){

    var type = $(this).attr("type");
    var index = $(this).attr("index");

    if (type === ".shape_one") {
        var pos = {
            1: "335.9,189.8 336.6,184.7 332.8,182.6 330.4,182.7 328.7,185.3 331.9,188.6",
            2: "176.7,26 142,252.6 313,346.4 431.3,341.8 560.7,262.4 402.1,48.4",
            3: "170.4,54.5 105.5,288.3 329.6,348.4 560.5,249.3 544.5,105.3 441.5,28.3",
            4: "132.2,52.8 74.5,252.8 210.2,334.3 472,284.7 543.3,139.4 355.4,32",
            5: "133.5,233.5 124.6,262.1 165.4,273.5 325.3,264.7 344.2,234.5 259.6,216"
        };
    } else {
        var pos = {
            1: "334.3,188.4 335.9,186.6 335,182.9 330.6,183.7 327,185.6 330.6,189.7",
            2: "246.8,86.3 193.6,190.4 213.3,335.1 488.8,293 571.9,213.9 511.6,59.8",
            3: "342.5,49.3 94.5,79.1 37.1,137.4 80.5,279.3 378.5,333.3 461.5,235.3",
            4: "335.5,60.3 228.9,97.8 196.4,253.7 278.5,290.3 576.3,257.3 572.5,127.3",
            5: "266.5,215.2 143.9,227.2 137.7,249.9 168.2,264.7 337.6,255.9 339.3,227.7"
        };
    }

    var svg = anime({
        targets: type,
        points: [
          { value: pos[index] }
        ],
        easing: 'easeOutQuad',
        duration: 300
    });

});

0 ответов

Другие вопросы по тегам