我正在使用 javascript 在动画（vivus.js）完成后显示 svg 文本

Question

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

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

因为vivus.js不能处理文字动画，我只是简单的先把文字的不透明度设为0，等svg线条动画完成后，再把文字的不透明度设为1，使其可见。

这是我在codepen 中导入 vivus.min.js 后放置的 .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”？

谢谢！

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 documentation