在动画(vivus.js)完成后，我使用javascript使svg文本显示

Question

我现在正在使用Vivus.js制作svg动画。

它是一个svg的线条动画，带有一些文本描述，在SVG的文本标签内。

因为vivus.js无法处理文本动画，所以我只需先将文本的不透明度设置为0，而在svg行动画完成后，我将文本的不透明度设置为1以使其可见。

以下是我在.js中导入vivus.min.js后的主要代码

// Making a svg line animation through Vivus.js, which works fine

var svg_product =
new Vivus('product', {
    type: 'scenario',
    duration: 100
});

// Make the <g id="text"> invisible before the animation is finished

var hidefirst = document.getElementById("text");
hidefirst.style.opacity = 0;

// Detect if the line animation is finished using strokeDashoffset

var line = document.getElementById("XMLID_202_");
var lineDetect = window.getComputedStyle(line).strokeDashoffset;

// After the line animation is finished, make <text> visible
// But the code seems doesn't work

if (lineDetect == "0px") {
    hidefirst.style.opacity = 1;
}

代码的最后一部分是我的问题。

我认为代码不起作用，因为我编写的"if条件“是在页面加载一开始就计算出来的，即False。

因此，我的问题是，如何正确地跟踪svg行的strokeDashoffset，以便在window.getComputedStyle(line).strokeDashoffset变为"0px“之后使文本的不透明度达到1？

谢谢!

Answer 1

您不需要检测动画是否已经完成，Vivus构造函数将接受第三个参数，即在动画末尾调用的函数。

var svg_product =
  new Vivus('product', {
              type: 'scenario',
              duration: 100 },
            function() {
              // called after the animation completes
  })

你可以用那个或者玩的方法。

svg_product.play(function() {
  // called after the animation completes
})

所有这些都来自Vivus github文档