Последовательная анимация прямоугольников svg

#javascript #html #css #svg #анимация

Мне нужно сделать последовательный запуск  "rect" svg  при нажатии на определенную
кнопку. При этом должны последовательно  становиться видимыми.







    

Ответы

Ответ 1

Вам нужен именно такой эффект?



var btn = document.getElementById('btn');
var rects = document.getElementsByClassName('st0');
btn.onclick = function() {
  Array.from(rects).forEach(function(el) {
    el.classList.add('visible');
  });
}
.st1 {
  font-family: 'MyriadPro-Regular';
}

.st2 {
  font-size: 13px;
}

.st0 {
  transition: 0.5s;
  opacity: 0;
  clip-rule: evenodd;
  stroke: #000000;
  stroke-miterlimit: 10;
  width: 35px;
  height: 35px;
}

.st0:nth-child(0) {
  transition-delay: 500ms;
}

.st0:nth-child(1) {
  transition-delay: 540ms;
}

.st0:nth-child(2) {
  transition-delay: 580ms;
}

.st0:nth-child(3) {
  transition-delay: 620ms;
}

.st0:nth-child(4) {
  transition-delay: 660ms;
}

.st0:nth-child(5) {
  transition-delay: 700ms;
}

.st0:nth-child(6) {
  transition-delay: 740ms;
}

.st0:nth-child(7) {
  transition-delay: 780ms;
}

.st0:nth-child(8) {
  transition-delay: 820ms;
}

.st0:nth-child(9) {
  transition-delay: 860ms;
}

.st0:nth-child(10) {
  transition-delay: 900ms;
}

.st0:nth-child(11) {
  transition-delay: 940ms;
}

.st0:nth-child(12) {
  transition-delay: 980ms;
}

.st0:nth-child(13) {
  transition-delay: 1020ms;
}

.st0:nth-child(14) {
  transition-delay: 1060ms;
}

.st0:nth-child(15) {
  transition-delay: 1100ms;
}

.st0:nth-child(16) {
  transition-delay: 1140ms;
}

.st0:nth-child(17) {
  transition-delay: 1180ms;
}

.st0:nth-child(18) {
  transition-delay: 1220ms;
}

.st0:nth-child(19) {
  transition-delay: 1260ms;
}

.visible {
  opacity: 1;
}