javascript - 如何通过 JavaScript 单击事件将 HTML 元素从一个位置移动到另一个位置

Question

我想在点击事件中将一个元素从一个位置移动到另一个位置，但是动画真的很卡。

您可以在此处查看原型(prototype)。

link

我的JS

// intialize the selected card as false
let selectedCard = false;
// find all the cards
let cards = document.querySelectorAll('.flex-item');
console.log(cards);
// grab the button
let button = document.querySelector('button')
// initialize the first card position
let firstCardPosition = '';
// intialize the selected card position
let selectedCardPosition = '';
// 
let isAnimating = false;

// Get the selected card position
function getSelectedCardPosition(card) {
  selectedCardPosition = card.getBoundingClientRect();
  console.log(selectedCardPosition);
};

// Get the first card position
function getFirstCardPosition(cards) {
  if (cards) {
    firstCardPosition = cards[0].getBoundingClientRect();    
  }
};

// Change the display of the card
function hideCards(card, interval) {
  isAnimating = true;
  setTimeout(function() {
    isAnimating = false;
    card.hidden = true;
  }, interval)
};

function showCards(card, interval) {
  isAnimating = true;
  setTimeout(function() {
    isAnimating = false;
    card.hidden = false;
  }, interval)
};


function fadeCards(cards) {
  cards.forEach(function(card) { 
    if (!card.selectedCard) {
      card.classList.remove('card-show');
      card.classList.add('card-hide');
      hideCards(card, 785);
    }
  });
};

function revealCards(cards) {
  cards.forEach((card) => {
    if (!card.selectedCard) {
      showCards(card, 0);
      card.classList.remove('card-hide');
      card.classList.add('card-show');
    }
  })
}

// Go through each card
// Add an attribute 'selectedCard'
// On first click, it is selected. We toggle it based on click
// If 'selectedCard' is true, than display the selected div - otherwise
// hide the div. 
cards.forEach(function(card) {

  // initialize the value to false
  card.selectedCard = false;

  // Grab the div that is the selected div.
  let showSelected = card.firstElementChild;

  // on click, do the things below. 
  card.addEventListener('click', function() {
    // if animating, get out of this function so no jankiness occurs
    if (isAnimating){
      return
    }
    // Toggle the value of the selected card
    card.selectedCard = !card.selectedCard;
    card.selectedCard ? showSelected.style.display = 'block' : showSelected.style.display = 'none';
    getSelectedCardPosition(card);
    getFirstCardPosition(cards)
    if (card.selectedCard) {
      fadeCards(cards); 
    } else {
      revealCards(cards);
    }
    moveToDestination(card, firstCardPosition, selectedCardPosition);
  });

});


function moveToDestination(card, firstCardPosition, selectedCardPosition) {
  const firstCardX = firstCardPosition.x;
  const firstCardY = firstCardPosition.y;
  let selectedCardX = selectedCardPosition.x;
  let selectedCardY = selectedCardPosition.y;

  let moveToXPosition = (selectedCardX - firstCardX) * -1;
  let moveToYPosition = (selectedCardY - firstCardY) * -1;


  let translateX = 'translateX' + '(' + moveToXPosition + 'px' + ')';
  let translateY = 'translateY' + '(' + moveToYPosition + 'px' + ')';
  console.log(translateX);
  console.log(translateY);
  card.animate(
    [
      // keyframes
      { transform: translateX },
      { transform: translateY }
    ], {
      duration: 800,
      easing: "ease-in-out"
    });
}

这里有一些挑战:

• 除“选定”元素之外的所有其他元素都需要淡出(并离开 DOM)。
• 我想避免使用 jQuery，因为我的特定实现不使用该框架。就是普通的 JS。
• 由于元素离开了 DOM，我无法使用 CSS transitions
• 我正在抓取第一张卡片位置和所选卡片位置，并使用 element.animate() 方法将所选卡片的 X 和 Y 更改为第一张卡片的 X 和 Y 数组
• 在沿“X”坐标移动时，将所选卡片移动到数组中第一张卡片的位置的动画效果不理想。
• 在小屏幕上查看时，“Y”坐标按预期工作。

我是不是在尝试做一些事情，但并没有按照我的预期进行工作，还是我的实现做得不好？

Answer 1

    cards.forEach(function(card) {

  // initialize the value to false
  card.selectedCard = false;

  // Grab the div that is the selected div.
  let showSelected = card.firstElementChild;

  // on click, do the things below. 
  card.addEventListener('click', function() {
    // if animating, get out of this function so no jankiness occurs
    if (isAnimating){
      return
    }
    // Toggle the value of the selected card
    card.selectedCard = !card.selectedCard;
    card.selectedCard ? showSelected.style.display = 'block' : showSelected.style.display = 'none';
    // only save the coordinates of the selected card if it's being selected and don't overwrite those when it's clicked again
    if (card.selectedCard)
      getSelectedCardPosition(card);
    getFirstCardPosition(cards) 
    console.log(card, selectedCardPosition);

   // Modifications to the method to add the animation onclick 
  if(card.selectedCard){ 
    card.style.position = 'fixed';
    // subtract 32px for padding
    card.style.top = selectedCardPosition.y - 32 + 'px'; 
    card.style.left = selectedCardPosition.x - 32 + 'px';
    setTimeout(function () {
    card.style.top = firstCardPosition.y - 32 + 'px';
    card.style.left = firstCardPosition.x - 32 + 'px';
    }, 1000)
  }
  // if the card is being unselected return it to it's previously saved coordinates
  else {
    card.style.top = selectedCardPosition.y - 32 + 'px'; 
    card.style.left = selectedCardPosition.x - 32 + 'px';
  }




    if (card.selectedCard) {
      fadeCards(cards); 
    } else {
      revealCards(cards);

      setTimeout(() => {
              card.style.position = 'relative';
      card.style.left = 'auto';
      card.style.top = 'auto';
      }, 500)



          moveToDestination(card, firstCardPosition, selectedCardPosition);

    }
  });

});

我已经对您的 onclick 处理程序进行了更改，并使卡片的位置在点击时固定。我还添加了一个 setTimeout 函数，以确保动画在单击元素后 1 秒发生。这肯定需要重构。否则，它将起作用。

这是修改后的笔。

https://codepen.io/faisalrashid/pen/zYOBVPg