Как снять паузу воспроизведения со скрипта по умолчанию?

Question

[Александр Янк]

Мне написали такой скрипт, по умолчанию стоит на паузе, а мне надо что бы по умолчанию стояло на плей:

https://codepen.io/alex-lenk/pen/WOoKMb

HTML код

<div id='icon'>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 77.9 65.7" style="enable-background:new 0 0 77.9 65.7;" xml:space="preserve">
    <g id="L1">
      <rect id='rect1' y="12.5" class="col" width="6" height="41" />
      <rect id='rect2' x="12" y="11.5" class="col" width="6" height="42"/>
      <rect id='rect3' x="24" y="12" class="col" width="6" height="42"/>
      <rect id='rect4' x="36" y="11.5" class="col" width="6" height="43"/>
      <rect id='rect5' x="48" y="5.5" class="col" width="6" height="54"/>
      <rect id='rect6' x="60" y="14.5" class="col" width="6" height="37"/>
      <rect id='rect7' x="72" y="17" class="col" width="6" height="32"/>
    </g>
  </svg>
</div>

JavaScript

'use strict';

var sheet = document.createElement('style');
sheet.type = 'text/css';
document.body.appendChild(sheet);

var state;

function go() {
  var res = '';
  state = state == 'running' ? 'paused' : 'running';
  var testimonials = document.querySelectorAll("#L1 rect");
  var an = function an(nY, nH, id, dur) {
    var st = state; // paused
    return '\n      #' + id + ' {\n       -webkit-animation: pic' + id + ' ' + dur + ' infinite linear;\n       -webkit-animation-play-state: ' + st + ';\n      }\n      @keyframes pic' + id + ' {\n        50% {\n          y: ' + nY + ';\n          height: ' + nH + 'px;\n        }\n      }\n    ';
  };
  var data = [{nY: 23, nH: 20, dur: '1.2s'}, {nY: 8, nH: 50, dur: '1s'}, {nY: 17, nH: 32, dur: '1s'}, {
    nY: 6,
    nH: 54,
    dur: '1s'
  }, {nY: 0, nH: 66, dur: '1s'}, {nY: 9, nH: 48, dur: '1s'}, {nY: 21, nH: 24, dur: '1s'}];
  Array.prototype.forEach.call(testimonials, function (el, index) {
    if (data[index] != -1) {
      var d = data[index];
      console.log(el.getAttribute("id"));
      res += an(d.nY, d.nH, el.getAttribute("id"), d.dur);
    }
  });
  sheet.innerHTML = res;
}

//go()

//go()

document.getElementById('icon').addEventListener("click", go, false);

Comments

[Yevgeniy Kisselyov]

А просто
//go()
Раскомментировать под функцией?
Вот так:
go()
Не вариант?
И скрипт в Мозиле не работает.

Answer 1

[maikttt]

Есть два способа
1. Так как воспроезведение работает после click, то можно програмно "делать" этот click, так:

document.getElementById('icon').dispatchEvent(new Event('click'));

2. При старте воспроезведение вызывается функция go, занчит если вызвать ее то будет старт
go();

Comments

[Александр Янк]

Не работает не один из вариантов. Человек, который написал скрипт пропал...

[maikttt]

Вот пример (на codepen) которыи у меня работает.

[Александр Янк]

Вот теперь понятно почему у меня не работало!
надо было сразу две строки:

document.getElementById("icon").addEventListener("click", go, false);
document.getElementById('icon').dispatchEvent(new Event('click'));

[Александр Янк]

В общем надо было всего лишь раскомментировать функцию go();

[maikttt]

Alex Lenk: В моем ответе я писал два варианта, второи как раз это и было