SVG Animation Deployment - PullRequest
Новая
       5

SVG Animation Deployment

0 голосов
/ 23 мая 2018

У меня есть сайт, который я создаю, и у меня есть SVG, который я анимировал.Я хочу, чтобы анимация не начиналась в течение заданного времени после загрузки страницы.Через n секунд я хочу начать анимацию SVG.Я понятия не имею, с чего начать, и хотел бы получить помощь.Спасибо.

JSFiddle: https://jsfiddle.net/adamkerik/6c17ajqa/

svg {
    width: 700px;
    display: block;
    position: absolute;
}
svg path:nth-child(1) {
    stroke-dasharray: 110.6;
    stroke-dashoffset: 0;
    animation: dash 3s linear;
}
svg path:nth-child(2) {
    stroke-dasharray: 320.6;
    stroke-dashoffset: 0;
    animation: dash2 3s linear;
}

и т. Д. Здесь, чтобы разрешить мою ссылку на JSFiddle, где находится полный код.Спасибо!

1 Ответ

0 голосов
/ 23 мая 2018

Вы всегда можете сделать анимацию классом .my-animation {...}

и использовать функцию setTimeout, чтобы добавить этот класс к элементу после определенного временного ограничения. 

setTimeout(function () {
    $("#my-svg").addClass('my-animation');
  }, 5000);

Этодобавит класс .my-animation к элементу #my-svg через 5 секунд

...