Question

当触发点击时，我想要一个元素与anime.js中的动画一起出现。

这意味着该元素应该最初隐藏或者opacity = 0。

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

JS

var lineDrawing = anime({
  targets: 'polyline',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutCubic',
  duration: 1000,
  autoplay: false
});

document.querySelector('.play-drawing').onclick = lineDrawing.restart;

HTML

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

我在以下代码段中有一个演示

＆＃13;

var lineDrawing = anime({
  targets: 'polyline',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutCubic',
  duration: 1000,
  autoplay: false
});

document.querySelector('.play-drawing').onclick = lineDrawing.restart;

＆＃13;

body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

.container{
  width:30%;
}
#anime-demo {
  position: relative;
}

svg {
   padding: 10px;
   position:relative;
   top:0px;
}

button {
  background: orange;
  color: white;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  cursor: pointer;
  border: none;
  outline: none;
}

button:hover {
  background: blue;
}
.text{
  width:80%;
  padding-left:10%;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<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>

＆＃13;

Answer 1

首先你应该动漫＆＃34;路径＆＃34;除了＆＃34;折线＆＃34;。我用它来转换：

Permissions Reference - Facebook Login

以及你可以做的不透明度：

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

这是我的例子：

https://codepen.io/jakealbaugh/pen/GZwgzV

如何使用anime.js

1 个答案: