时间戳

首页 > 解决方案 > 我将如何将下降的动画保持在最后一帧？

javascript - 我将如何将下降的动画保持在最后一帧？

问题描述

我所拥有的一切都按预期工作，但我正在努力让粉红色的糖果/点留在空白区域的底部。我已经尝试过“前进”，但它仍然无法正常工作。我可能有什么问题。目前，粉红点/糖果正在上升到原来的位置。

var leftB =
  document.querySelector("#button1")
leftB.addEventListener("click", moveLeft, false);

var rightB =
  document.querySelector("#button2")
rightB.addEventListener("click", moveRight, false);

var circleP =
  document.querySelector(".pumpkin")

var positionC = 0;

function moveLeft() {
  positionC = positionC - 50;
  // position -= 100;
  circleP.style.transform = "translateX(" + positionC + "px)";
}

function moveRight() {
  positionC = positionC + 50;
  circleP.style.transform = "translateX(" + positionC + "px)";
}



var myBody =
  document.querySelector("body")

var candy = [];

for (var i = 0; i < 100; i++) {

  var myRandom = Math.random() * 100; // max 100
  var myRandom2 = Math.random() * 5;

  candy[i] = document.createElement("div"); ///<div> </div>
  candy[i].setAttribute("id", "candy" + i);
  candy[i].setAttribute("class", "dots");
  candy[i].style.left = myRandom + "vw";
  candy[i].style.animation = "falling 3s ease-in " + myRandom2 + "s forwards";

  myBody.appendChild(candy[i]);
}
.pumpkin {
  position: absolute;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#pumpkin2 {
  position: absolute;
  bottom: 12vw;
  left: 46vw;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#pumpkin3 {
  position: absolute;
  bottom: 0vw;
  left: 3vw;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#stem {
  position: absolute;
  top: -2vw;
  left: 6.5vw;
  width: 10px;
  height: 25px;
  background-color: green;
  border-radius: 70px
}

#button1 {
  position: absolute;
  left: 10vw;
  bottom: 3vw;
  width: 100px;
  height: 50px;
  border-radius: 10%;
  background-color: darkorange;
}

#button2 {
  position: absolute;
  left: 80vw;
  bottom: 3vw;
  width: 100px;
  height: 50px;
  border-radius: 10%;
  background-color: darkorange;
}

#base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  background-color: black;
  z-index: -1;
}

#left {
  color: black;
  text-align: center;
  line-height: 6.5vh;
  font-family: sans-serif;
}

#right {
  color: black;
  text-align: center;
  line-height: 6.5vh;
  font-family: sans-serif;
}

.dots {
  position: absolute;
  top: -5vh;
  left: 0;
  width: 15px;
  height: 15px;
  background-color: hotpink;
  border-radius: 50%;
  animation: falling 3s ease-in forwards;
}

@keyframes falling {
  from {
    transform: scaleY(1), translateY(0vh)
  }
  30% {
    transform: translateY(90vh)
  }
  to: {
    transform: translateY(90vh)
  }
}
<body>
  <div class="pumpkin" id="pumpkin2">
    <div class="pumpkin" id="pumpkin3"> </div>
    <div class="pumpkin" id="stem"> </div>
  </div>
  <div id="button1">
    <div id="left"> Left </div>
  </div>
  <div id="button2">
    <div id="right"> Right </div>
  </div>
  <div id="Base"> </div>
</body>

我对这些语言还是新手，所以所有这些 Javscript 有点吓人。我相信错误出在我的动画或我的 candy[i].style.animation 上。

标签： javascripthtmlcss

解决方案

您的@keyframes规则集包含无效to声明，因为您:在标记后使用了冒号 ( ) to，这是无效的语法。当 CSS 解释器不知道在哪里设置动画to时，它会动画回initial属性值。

删除冒号 ( :) 字符，您的动画将按预期工作：

var leftB =
  document.querySelector("#button1")
leftB.addEventListener("click", moveLeft, false);

var rightB =
  document.querySelector("#button2")
rightB.addEventListener("click", moveRight, false);

var circleP =
  document.querySelector(".pumpkin")

var positionC = 0;

function moveLeft() {
  positionC = positionC - 50;
  // position -= 100;
  circleP.style.transform = "translateX(" + positionC + "px)";
}

function moveRight() {
  positionC = positionC + 50;
  circleP.style.transform = "translateX(" + positionC + "px)";
}



var myBody =
  document.querySelector("body")

var candy = [];

for (var i = 0; i < 100; i++) {

  var myRandom = Math.random() * 100; // max 100
  var myRandom2 = Math.random() * 5;

  candy[i] = document.createElement("div"); ///<div> </div>
  candy[i].setAttribute("id", "candy" + i);
  candy[i].setAttribute("class", "dots");
  candy[i].style.left = myRandom + "vw";
  candy[i].style.animation = "falling 3s ease-in " + myRandom2 + "s forwards";

  myBody.appendChild(candy[i]);
}
.pumpkin {
  position: absolute;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#pumpkin2 {
  position: absolute;
  bottom: 12vw;
  left: 46vw;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#pumpkin3 {
  position: absolute;
  bottom: 0vw;
  left: 3vw;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#stem {
  position: absolute;
  top: -2vw;
  left: 6.5vw;
  width: 10px;
  height: 25px;
  background-color: green;
  border-radius: 70px
}

#button1 {
  position: absolute;
  left: 10vw;
  bottom: 3vw;
  width: 100px;
  height: 50px;
  border-radius: 10%;
  background-color: darkorange;
}

#button2 {
  position: absolute;
  left: 80vw;
  bottom: 3vw;
  width: 100px;
  height: 50px;
  border-radius: 10%;
  background-color: darkorange;
}

#base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  background-color: black;
  z-index: -1;
}

#left {
  color: black;
  text-align: center;
  line-height: 6.5vh;
  font-family: sans-serif;
}

#right {
  color: black;
  text-align: center;
  line-height: 6.5vh;
  font-family: sans-serif;
}

.dots {
  position: absolute;
  top: -5vh;
  left: 0;
  width: 15px;
  height: 15px;
  background-color: hotpink;
  border-radius: 50%;
  animation: falling 3s ease-in forwards;
}

@keyframes falling {
  from {
    transform: scaleY(1), translateY(0vh)
  }
  30% {
    transform: translateY(90vh)
  }
  to {
    transform: translateY(90vh)
  }
}
<body>
  <div class="pumpkin" id="pumpkin2">
    <div class="pumpkin" id="pumpkin3"> </div>
    <div class="pumpkin" id="stem"> </div>
  </div>
  <div id="button1">
    <div id="left"> Left </div>
  </div>
  <div id="button2">
    <div id="right"> Right </div>
  </div>
  <div id="Base"> </div>
</body>

推荐阅读