我有一個似乎無法解決的動畫問題。動畫的目的如下:

卡片最初放在包裝紙的右下角，不透明度設置為0。 然后，卡片移動到其包裝的左下角，不透明度在一秒鐘內轉變為1。 接下來，卡片在包裝器內向上移動與其大小相等的像素，有一秒鐘的過渡時間。 重復步驟3，一次一個動作，直到卡片超過包裝紙的高度。在最后一次移動過程中，卡片的不透明度返回到0。 到目前為止，代碼如下:

const wrapper = document.querySelector('.wrapper');
const card = document.querySelector('.card');
card.style.bottom = '0';
card.style.right = '0';
card.style.opacity = '0';
requestAnimationFrame(() => {

  card.style.transition = '1s';
  card.style.bottom = '0';
  card.style.right = 'auto';
  card.style.left = '0';
  card.style.opacity = '1';
  const cardHeight = card.offsetHeight;
  const wrapperHeight = wrapper.offsetHeight;

  function moveCard() {
    if (parseInt(card.style.bottom) < wrapperHeight) {
      card.style.transition = '1s';
      card.style.bottom = parseInt(card.style.bottom) + cardHeight + 'px';
      card.style.opacity = '1';
      setTimeout(moveCard, 1000);
    } else if (parseInt(card.style.bottom) >= wrapperHeight && card.style.opacity !== '0') {
      // Dernier mouvement : Repasser à une opacité de 0
      card.style.transition = '1s';
      card.style.opacity = '0';
      setTimeout(moveCard, 1000);
    }
  }
  setTimeout(moveCard, 1000);
});

.wrapper{
  display:flex;
  height : 200px;
  width : 300px;
  background: grey;
  position: relative;
}
.card{
  position: absolute;
  width:50px;
  height: 50px;
  background: red;
}

<div class= "wrapper">
  <div class="card">
  
</div>
</div>

您可能會發現這很有幫助:左-& gt；右上方-& gt；底部位置。問題是你試圖用左和右來翻譯，而瀏覽器認為這是不同的。嘗試省略左側，僅用右側翻譯，在這種情況下:

const wrapper = document.querySelector('.wrapper');
const card = document.querySelector('.card');
card.style.bottom = '0';
card.style.right = '0';
card.style.opacity = '0';

requestAnimationFrame(() => {

  card.style.transition = '1s';
  card.style.bottom = '0';
  card.style.right = '250px';
  card.style.opacity = '1';
  const cardHeight = card.offsetHeight;
  const wrapperHeight = wrapper.offsetHeight;

  function moveCard() {
    if (parseInt(card.style.bottom) < wrapperHeight) {
      card.style.transition = '1s';
      card.style.bottom = parseInt(card.style.bottom) + cardHeight + 'px';
      card.style.opacity = '1';
      setTimeout(moveCard, 1000);
    } else if (parseInt(card.style.bottom) >= wrapperHeight && card.style.opacity !== '0') {
      // Dernier mouvement : Repasser à une opacité de 0
      card.style.transition = '1s';
      card.style.opacity = '0';
      setTimeout(moveCard, 1000);
    }
  }
  setTimeout(moveCard, 1000);
});

.wrapper {
  display: flex;
  height: 200px;
  width: 300px;
  background: grey;
  position: relative;
}

.card {
  position: absolute;
  width: 50px;
  height: 50px;
  background: red;
}

<div class="wrapper">
  <div class="card">

  </div>
</div>

根據您提供的代碼，看起來您的思路是正確的，但是需要做一些調整來實現想要的動畫。以下是您的代碼的更新版本:

const wrapper = document.querySelector('.wrapper');
const card = document.querySelector('.card');
card.style.bottom = '0';
card.style.right = '0';
card.style.opacity = '0';

requestAnimationFrame(() => {
  card.style.transition = '1s';
  card.style.right = 'auto';
  card.style.left = '0';
  card.style.opacity = '1';

  const cardHeight = card.offsetHeight;
  const wrapperHeight = wrapper.offsetHeight;

  function moveCard() {
    if (parseInt(card.style.bottom) + cardHeight < wrapperHeight) {
      card.style.bottom = parseInt(card.style.bottom) + cardHeight + 'px';
      setTimeout(moveCard, 1000);
    } else if (card.style.opacity !== '0') {
      card.style.opacity = '0';
      setTimeout(moveCard, 1000);
    }
  }

  setTimeout(moveCard, 1000);
});

代碼中所做的更改:

從else中移除不必要的card.style.transition屬性 如果條件，因為不透明度過渡已經設置在 moveCard功能。將第一個if語句中的條件調整為 檢查卡的當前位置加上其高度是否小于 包裝的高度。移除了多余的card . style . opacity = ' 1 '； 語句，因為它已經在外部設置了 moveCard函數。經過這些調整，卡現在應該 按照你的要求制作動畫。