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

Question

大家好，我的问题是我正在尝试 link 从 SVGartista.com 下载的多个 svg 动画，预先警告我不是 java 脚本或网络开发专家，但我不知道怎么做，当我用 js 尝试时，我查找的所有内容都不起作用。这是我当前的代码，我没有为 svg 添加 html，因为它令人讨厌。我只包含了一个 svg css 的例子，因为它太长了。但是，如果有人对如何循环播放这些动画中的多个动画有任何想法，那么我会采纳任何想法。 css 既是逐张淡入又是淡出，最终目标是让它淡入，停留3秒，然后淡出，然后下一张图像重复相同的过程，依此类推直到它循环结束。谢谢（再次抱歉，我是 Whosebug 的新手）

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 元素并且您想将“活动”class 添加到第一个，等待 fade-in 动画，删除，等待 fade-out 动画然后添加活动 class 和动画到你的下一个 svg，那么你至少有两个选择：

1- 简单但不是 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
}

如果您使用的是低端设备，动画速度较慢/卡顿，那么您将在第 n 个动画真正结束之前开始第 n+1 个动画。

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();

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

linking multiple svg css animations using java script

html

javascript

css

svg