Javascript 如何使用anime.js设置隐藏元素的动画

我希望在触发单击时，有一个元素与anime.js中的动画一起出现

这意味着元素最初应该隐藏或不透明度为0

我在下面附上了一个演示。元素没有隐藏，因为我不知道如何在绘制线动画时使用anime.js将其从隐藏更改为可见

JS

HTML

身体{ 利润率：20px； 字体系列：“Lato”； 字体大小：300； 字体大小：1.2米； } .集装箱{ 宽度：30%； } 动画演示{ 位置：相对位置； } svg{ 填充：10px； 位置：相对位置； 顶部：0px； } 钮扣{ 背景：橙色； 颜色：白色； 填充：10px； 边界半径：4px； 字体系列：“Lato”； 光标：指针； 边界：无； 大纲：无； } 按钮：悬停{ 背景：蓝色； } .文本{ 宽度：80%； 左：10%； } .cls-1{填充：无；笔划：03a9f4；笔划斜接限制：10；笔划宽度：2px；} 起锚

---

首先，应该动画除多段线以外的路径。 我使用它来转换：

关于不透明度，你可以做：

opacity: [
{ value: [0, 1], duration: 300, easing: 'easeOutQuad' }
  ],

以下是我的例子：

---

您希望动画的外观如何？

<div class="container">

<div id="anime-demo">
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#03a9f4;stroke-miterlimit:10;stroke-width:2px;}</style></defs>
    <polyline class="cls-1" points="100 0 0 0 0 100 100 100 100 40"/></svg>
</div>
</div>
<div >
<button class="play-drawing">Draw the Anchor</button>
</div>

opacity: [
{ value: [0, 1], duration: 300, easing: 'easeOutQuad' }
  ],