javascript - CSS 变换 : translateX( to the right );

Question

我想为我的主页制作一个粒子系统。蓝色的小圆点应该从左到右，然后在左边重新出现，这样就形成了一个循环。 Image of particles

下面的代码将生成 150 个点，它们都具有不同的属性，如速度颜色和大小，并且会在加载页面时出现在随机位置。通过循环动画或通过添加新点我想无限地继续动画。

// ========== JAVASCRIPT ==========
function Dot(){
    var colors = [
        "#313146",
        "#36364f",
        "#3d3d5c",
        "#404066"
    ];
    var speed = Math.floor(Math.random() * 20) + 2;

    this.obj = document.createElement("div");
    this.obj.classList.add("dot");
    this.obj.style.top = (window.innerHeight * Math.random()) + 'px'; // random Y-position after page load
    this.obj.style.left = (window.innerWidth * Math.random()) + 'px'; // random X-position after page load
    this.size = Math.floor(Math.random() * 5) + 4; // random size
    this.obj.style.height =  this.size + 'px';
    this.obj.style.width = this.size + 'px';
    this.obj.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)]; // random color
    this.obj.style.animation = `move ${speed}s linear`; // start animation
    document.body.appendChild(this.obj);

    setTimeout(del, speed*1000, this.obj); // THIS FUNCTION SHOULD BE REMOVED IF ANIMATION GETS A LOOP
    function del(element) {
        element.parentNode.removeChild(element);
    };
};

for(var i = 0 ; i < 151 ; i++ ){ // creating 150 dots
    new Dot();
};

// ========== CSS ==========

.dot {
    border-radius: 50%;
    z-index: -1;
}

@keyframes move {
    0% {
        transform: translateX(0vw);
    }
    100% {
        transform: translateX(100vw);
    }
}

我的问题是，当点出现在随机位置，并且所有点都得到 transform: translateX(100vw); 时，它们会在被删除或删除之前移出屏幕一段时间重新出现在开头。我的第二张图片以红色显示了点移动到的位置以及应该移动到的位置。

image

我已经尝试过的:

1.记者:this.obj.style.animation = `move ${speed}s linear infinite`;添加了infinite，删除了删除点的代码。

CSS:

@keyframes move {
    0% {
        transform: translateX(0vw);
    }
    100% {
        transform: translateX(right); 
    }
}

<= 不存在，也找不到与此想法相同的工作代码。这本来是一个解决方案。

2。添加第二个动画，当其他点被删除时，点从左边出现。在第一个动画的 150 个点和第二个动画的传入点之间的间隙结束。

是否有任何其他可能性将具有不同属性的点从左向右移动？

最好的问候

Answer 1

由于您是使用 JS 设置位置，因此您可以准确知道每个元素将出现的位置，并使用此信息来调整动画。

这里有一个基本的例子来说明:

.dot {
  background: blue;
  position:fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: -1;
  left:var(--x,0px);
  animation:move 2s linear infinite;
}

@keyframes move {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(calc(100vw - var(--x,0px)));
  }
}

<div class="dot" style="top:10px;--x:80px;"></div>

<div class="dot" style="top:20px;--x:150px;"></div>

<div class="dot" style="top:100px;--x:350px;"></div>

变量 --x 将定义 left 并将从 100vw 中减去

---

为了更好的支持，并且由于您使用的是 JS，您可以去掉 calc() 和 CSS 变量。简单地做一个小的计算来找到变换的值。

这里是一个示例，为了简单起见，我使用了 jQuery，但您可以轻松地将它变成一个纯 JS 代码:

$('.dot').each(function() {
  $(this).css('transform','translateX('+ ($(window).width() - parseInt($(this).css('left')))+'px)');
});

.dot {
  background: blue;
  position:fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: -1;
  animation:move 2s linear infinite;
}

@keyframes move {
  0% {
    transform: translateX(0px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dot" style="top:10px;left:80px;"></div>

<div class="dot" style="top:20px;left:150px;"></div>

<div class="dot" style="top:100px;left:350px;"></div>

值得注意的是，您需要在窗口调整大小时更新值

---

保持循环效果的另一个想法是让所有人都拥有相同的位置和相同的动画，然后调整延迟以模拟不同的位置:

.dot {
  background: blue;
  position:fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: -1;
  left:0;
  animation:move 2s linear infinite;
}

@keyframes move {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(100vw);
  }
}

<div class="dot" style="top:10px;animation-delay:-1s;"></div>

<div class="dot" style="top:20px;animation-delay:-0.1s;animation-duration:1s"></div>

<div class="dot" style="top:100px;animation-delay:-0.5s;animation-duration:4s"></div>

计算很简单。如果动画持续时间为 D，则延迟 -D/2 会将元素初始放置在中心。 -D*0.1 会将图像放置在 10% 等等。