有没有办法确保所有元素在再次操作之前都已重置到原始位置？

Question

首先，我知道这是一个大问题。我正在寻找更多的想法和指导，而不是一个完整的解决方案。我正在建立一个屏幕上有十张卡片的网站。每张卡与前一张卡稍有重叠。当鼠标放在卡上时，其他卡应移开，突出显示的卡应展开。有没有一种方法可以使光标移出当前卡之后且开始任何其他操作之前，所有卡都返回到其原始位置？我已将所有代码包含在当前的.html文件中。我尝试在HTML文档上使用onMouseOver和onMouseOut来移动元素，具体取决于调用的函数。我尝试将GSAP与时间轴类混淆，但无法弄清楚如何制作可以播放，停止，倒退等的动画。我目前使用它来设置添加和删除具有超时的事件侦听器的时间，以限制函数的调用速度。var cards = document.getElementsByClassName('card');var currentCard;var currentIndex;var leftSpread = 150;var rightSpread = 200;var initialOffset = 100;(function initialLoad() {  for (var i = 0; i < cards.length; i++) {    cards[i].style.zIndex = i;    cards[i].addEventListener("mouseenter", this);    if (i > 0) {      cards[i].style.left = cards[i - 1].offsetLeft + initialOffset + 'px';    }  }})();function handleEvent(evt) {  switch (evt.type) {    case "mouseenter":      this.cardMouseOver(evt);      break;    case "mouseout":      this.cardMouseOut(evt);      break;    default:      return;  }}function cardMouseOver(event) {  currentIndex = event.target.style.zIndex;  event.target.style.zIndex = 10;  for (var i = 0; i < cards.length; i++) {    if (event.target == cards[i]) {      currentCard = i;    } else {      cards[i].removeEventListener("mouseenter", this);    }  }  setTimeout(function() {    cards[currentCard].addEventListener("mouseout", this);  }, 50);  for (var i = 0; i < cards.length; i++) {    if (i < currentCard) {      cards[i].style.left = cards[i].offsetLeft - leftSpread + 'px';    } else if (i > currentCard) {      cards[i].style.left = cards[i].offsetLeft + rightSpread + 'px';    }  }  cards[currentCard].removeEventListener("mouseenter", this);}function cardMouseOut(event) {  cards[currentCard].style.zIndex = currentIndex;  setTimeout(function() {    for (var i = 0; i < cards.length; i++) {      cards[i].addEventListener("mouseenter", this);    }  }, 100);  for (var i = 0; i < cards.length; i++) {    if (i === currentCard) {      cards[i].removeEventListener("mouseout", this);    }  }我希望一切都根据当前突出显示的卡片（平滑过渡）来定位，并在突出显示任何内容时重置为原始位置。

Answer 1

通过继续挖掘，我找到了答案。这比我想象的要简单得多。由于在鼠标悬停在卡片上时希望获得平滑的动画效果，因此我使用了CSS过渡和变换属性。

通过创建以下CSS类：

.card {

    position: absolute;

    background: rgb(255, 255, 255);

    height: 275px;

    width: 200px;

    box-shadow: -1px 0px 3px 1px rgba(0, 0, 0, 0.747);

    transition: all .4s ease;

}

.card.left {

    transform: translateX(-175px);

}

.card.right {

    transform: translateX(175px);

}

我能够在“ mouseenter”和“ mouseover”事件侦听器中添加和删除事件侦听器，以获得所需的效果。

function handleEvent(evt) {

    switch(evt.type) {

        case "mouseenter":

            this.cardMouseOver(evt);

            break;

        case "mouseout":

            this.cardMouseOut(evt);

            break;

        default:

            return;

    }

}

function cardMouseOver(event) {

    for (var i = 0; i < cards.length; i++) {

        if (event.target == cards[i]) {

            currentCard = i;

        }

    }

    for (var i = 0; i < cards.length; i++) {

        if (i < currentCard) {

            if (!cards[i].classList.contains('left')) {

                cards[i].classList.add('left');

            }

        } else if (i > currentCard) {

            if (!cards[i].classList.contains('right')) {

                cards[i].classList.add('right');

            }

        }

    }

}

function cardMouseOut(event) {

    for (var i = 0; i < cards.length; i++) {

        if (i < currentCard) {

            if (cards[i].classList.contains('right')) {

                cards[i].classList.remove('right');

            } else if (cards[i].classList.contains('left')) {

                cards[i].classList.remove('left');

            }

        } else if (i > currentCard) {

            if (cards[i].classList.contains('left')) {

                cards[i].classList.remove('left');

            } else if (cards[i].classList.contains('right')) {

                cards[i].classList.remove('right');

            }

        } else {

            if (cards[i].classList.contains('left')) {

                cards[i].classList.remove('left');

            } else if (cards[i].classList.contains('right')) {

                cards[i].classList.remove('right');

            }

        }

    }

}

凡卡是“卡”元素的数组。