首页 / 技术问答 / Javascript问答列表 / 问答详情

使用javascript链接多个svg css动画

大家好，我的问题是，我正在try 链接从SvGarista下载的多个svg动画.com，预先警告我不是java脚本或web开发专家，但我不知道该怎么做，当我try 使用js时，我查找的所有内容都不起作用.这是我目前的代码，我没有包括svg的html，因为它令人讨厌.我只举了一个css for svg的例子，因为它太长了.但是如果有人对如何循环多个动画有 idea ，我会采纳任何 idea .css是一张一张地淡入淡出的，最终目标是让它淡入，停留3秒，然后淡出，然后下一张图像重复相同的过程，如此循环，直到它结束.谢谢(再次抱歉，我是stackoverflow的新手)

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')

推荐答案

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

1-简单但并非100%准确:

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个动画.

2-你可以等待事件发生.以确保每一个动画都真正完成.(您可以使用此promise wrapper 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();

Javascript相关问答推荐

通过实现regex逻辑自定义数据表搜索

在JavaScript中，是否有一种方法可以创建自定义thable，在等待某些代码后自动触发它？

React Native平面列表自动滚动

如何分配类型脚本中具有不同/额外参数的函数类型

我在这个黑暗模式按钮上做错了什么？

Google图表时间轴—更改hAxis文本 colored颜色

使用下表中所示的值初始化一个二维数组

Next.js(react)使用moment或不使用日期和时间格式

WebRTC关闭navigator. getUserMedia正确

如何调用名称在字符串中的实例方法？

我正在建立一个基于文本的游戏在react ，我是从JS转换.我怎样才能使变量变呢？

使用ThreeJ渲染的形状具有抖动/模糊的边缘

TypeError：无法分解'；React2.useContext(...)'；的属性'；basename'；，因为它为空

在使用位板时，如何在Java脚本中判断Connect 4板中中柱的对称性？

未捕获语法错误：Hello World中的令牌无效或意外

如何在Java脚本中对数据进行签名，并在PHP中验证签名？

React：防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

如何在AG-Grid文本字段中创建占位符

FireBase FiRestore安全规则-嵌套对象的MapDiff

本地损坏的Java脚本

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630