如何给这个函数添加淡入淡出

Question

我想为这个 Codepen 项目添加淡入效果：

https://codepen.io/Jeremboo/pen/ENVaMY?limit=all&page=2&q=particle（不是我的）。

我想做的是慢慢创建一个粒子，但是我不知道怎么做。

/* ---- START ---- */
function init() {
  var i = void 0;
  for (i = 0; i < numberParticlesStart; i++) {
    var angle = Math.random() * 360;
    particles.push(new Particle(windowWidth * 0.5 + Math.cos(angle) * circleWidth, windowHeight * 0.5 - Math.sin(angle) * circleWidth));
  }
}

这可能是我需要放置一些函数的代码，我试过 jquery 但它不起作用

我的一次尝试

/* ---- START ---- */
function init() {
  var i = void 0;
  for (i = 0; i < numberParticlesStart; i++) {
    var angle = Math.random() * 360;
    particles.push(new Particle(windowWidth * 0.5 + Math.cos(angle) * circleWidth, windowHeight * 0.5 - Math.sin(angle) * circleWidth)).fadeIn( "slow" );
  }
}

我不确定我是否可以将 jquery 添加到纯 js 函数中。

Answer 1

您是否考虑过将 CSS 动画添加到包含动画的 div 中？

.f {
  position: fixed
  bottom: 5px
  right: 15px
  font-family: 'Arial'
  font-size: 0.7rem
  color: mainColor
  text-align: center;
  animation:3s ease 0s normal forwards 1 fadein;
  -webkit-animation:3s ease 0s normal forwards 1 fadein;
  opacity:1;
}

@keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

@-webkit-keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

如何给这个函数添加淡入淡出

How to add fadein to this function

javascript

jquery

codepen