Аниме JS не рисует линию в vue js - PullRequest
Новая
       61

Аниме JS не рисует линию в vue js

0 голосов
/ 17 апреля 2020

Я хочу сделать рисование линий с аниме js в vue js, это код, который я получил, чтобы сделать рисование линий. 

 mounted() {
    this
      .$anime
      .timeline()
      .add({
        targets: "path",
        duration: 3000,
        easing: "easeInOutCubic",
        begin: function() {
          document.querySelector("path").setAttribute("stroke", "orange");
          document.querySelector("path").setAttribute("fill", "none");
        },
        complete: function() {
          document.querySelector("path").setAttribute("fill", "blue");
        },
      });
  }
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0099ff" fill-opacity="1" d="M0,288L48,256C96,224,192,160,288,133.3C384,107,480,117,576,112C672,107,768,85,864,80C960,75,1056,85,1152,106.7C1248,128,1344,160,1392,176L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>

Однако, когда я запускаю код. SVG уже выглядит нарисованным, а затем заполняет форму несколько секунд спустя. Однако svg не рисует фигуры на каждом пути, и это то, чего я пытаюсь достичь.

...