使用java脚本链接多个svg css动画

Question

嗨，所以我的问题是，我试图链接多个我从SVGartista.com下载的svg动画，预先警告我不是一个java脚本或web开发专家，但我不知道如何做，当我使用js时，我所查找的所有内容都不起作用。下面是我当前的代码，我没有包含svg的html，因为它令人讨厌。我只提供了一个svg css的例子，因为它太长了。但是，如果有人对如何循环多个这些动画有一个想法，那么我会采取任何想法。css是为了让它一片一片地褪色，最终的目标是让它消失，停留3秒，然后淡出，然后下一个图像重复相同的过程，等等，直到它循环通过。谢谢(再次向堆叠溢出表示歉意)

svg .svg-elem-1 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  }
  
  svg.active .svg-elem-1 {
    fill: rgb(108, 99, 255);
  }
  
  svg .svg-elem-2 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  }
  
  svg.active .svg-elem-2 {
    fill: rgb(230, 230, 230);
  }
  
  svg .svg-elem-3 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
  
  svg.active .svg-elem-3 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-4 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  }
  
  svg.active .svg-elem-4 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-5 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
  }
  
  svg.active .svg-elem-5 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-6 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
  }
  
  svg.active .svg-elem-6 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-7 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
  }
  
  svg.active .svg-elem-7 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-8 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
  }
  
  svg.active .svg-elem-8 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-9 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
  }
  
  svg.active .svg-elem-9 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-10 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
  }
  
  svg.active .svg-elem-10 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-11 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
  }
  
  svg.active .svg-elem-11 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-12 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
  }
  
  svg.active .svg-elem-12 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-13 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
  
  svg.active .svg-elem-13 {
    fill: rgb(230, 230, 230);
  }
  
  svg .svg-elem-14 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
  }
  
  svg.active .svg-elem-14 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-15 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
  }
  
  svg.active .svg-elem-15 {
    fill: rgb(230, 230, 230);
  }
  
  svg .svg-elem-16 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
  }
  
  svg.active .svg-elem-16 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-17 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
  }
  
  svg.active .svg-elem-17 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-18 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
  }
  
  svg.active .svg-elem-18 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-19 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
  }
  
  svg.active .svg-elem-19 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-20 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
  }
  
  svg.active .svg-elem-20 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-21 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
  }
  
  svg.active .svg-elem-21 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-22 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
  }
  
  svg.active .svg-elem-22 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-23 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
  }
  
  svg.active .svg-elem-23 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-24 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
  }
  
  svg.active .svg-elem-24 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-25 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
  }
  
  svg.active .svg-elem-25 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-26 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
  }
  
  svg.active .svg-elem-26 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-27 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
  }
  
  svg.active .svg-elem-27 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-28 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
  }
  
  svg.active .svg-elem-28 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-29 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
  }
  
  svg.active .svg-elem-29 {
    fill: rgb(255, 255, 255);
  }

var wrapper = document.getElementById("eUZ3dEPR9vg1")

wrapper.classList.add('active')

Answer 1

你有多个svgs吗？或者一个svg里面有多个元素？假设是多个svg部分，并且您希望将“活动”类添加到第一个svg中，等待淡入恢复、删除、等待淡出动画，然后将活动类和动画添加到下一个svg中，那么您至少有两个选项：

简单，但不是100%准确:根据你的css，我们假设动画需要3.6 + 0.7秒。

const ids = ["eUZ3d...", "foobar123", ...]
for (let i = 0; i < ids.length; i++){
    const el = document.getElementById(ids[i]);
    setTimeout(() => el.classList.add("active"), 4300 * 2 * i); // start fade-in
    setTimeout(() => el.classList.remove("active"), 4300 * (2 * i +1)); // start fade-out
}

如果您有一个低端设备，如果动画速度较慢/使用jank，那么在第n个动画真正结束之前，您将启动n+1 th动画。

2-你可以等待transitionend事件。以确保您的动画什么时候真正完成了他们每一个。(您可以使用这个承诺包装器https://github.com/kluntje/kluntje/blob/develop/packages/js-utils/src/dom-helpers/lib/waitForTransitionEnd.ts来编写更易读的代码)：

async function func () {
    const ids = ["eUZ3d...", "foobar123", ...]
    for (let i = 0; i < ids.length; i++){
        const el = document.getElementById(ids[i]);
        el.classList.add("active")// start fade-in
        await waitForTransitionEnd(el.querySelector(".svg-elem-29")); // svg part with the last tranisition according to the css
        el.classList.remove("active")// start fade-out
        await waitForTransitionEnd(el.querySelector(".svg-elem-29"));
    }
}

func();