文章/答案/技术大牛

发布

社区首页 >问答首页 >有没有一种方法可以确保所有元素在再次操作之前都已重置到原始位置？

问有没有一种方法可以确保所有元素在再次操作之前都已重置到原始位置？
EN

Stack Overflow用户

提问于 2019-04-25 23:51:38

回答 2查看 41关注 0票数 1

首先，我知道这是一个大问题。我更多的是在寻找想法和指导，而不是一个完整的解决方案。我正在建立一个在屏幕上有10张卡片的网站。每张牌与前一张牌稍有重叠。当鼠标放在一张卡片上时，其他卡片应该会移开，突出显示的卡片应该会展开。有没有一种方法可以让所有的卡片在光标离开当前卡片后，在开始任何其他操作之前返回到它们的原始位置？我已经包含了当前.html文件中的所有代码。

我尝试过在HTML文档上使用onMouseOver和onMouseOut来回移动元素，这取决于所调用的函数。

我尝试在timeline类中使用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);
    }
  }

  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';
    }
  }
}

body {
  background-color: #242424;
  padding: 0;
  margin: 0;
}

.cards-container {
  background: #fff;
  margin: 20px auto;
  position: absolute;
  left: 21%;
  top: 375px;
}

.card {
  position: absolute;
  background: rgb(255, 255, 255);
  border: 1px solid black;
  height: 250px;
  transition: 0.2s;
  width: 200px;
  box-shadow: -1px 0px 1px 1px rgba(0, 0, 0, 0.747);
}

.card:hover {
  transition: all 0.2s ease;
  width: 250px;
  height: 350px;
  top: -75px;
}

<body>
  <header>
    <div class="cards-container">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
    </div>
  </header>
</body>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.0.min.js"></script>

我希望所有东西都能根据当前高亮显示的卡片来定位(平滑过渡)，并在没有高亮显示的情况下重置到原始位置。

dom

javascript

html

css

回答 2

Stack Overflow用户

发布于 2019-04-26 00:16:47

有几种方法可以做到这一点

您可以有一个布尔标志，用于在元素移动/移位时进行切换。当元素返回到其起始位置时，您可以从此处重新切换。

let DOMHasChanged = false

function handleEvent(evt) {
  DOMHasChanged = true
  switch (evt.type) {
    case "mouseenter":
      this.cardMouseOver(evt);
      break;
    case "mouseout":
      this.cardMouseOut(evt);
      break;
    default:
      return;
  }
}

// Some function to set DOMHasChanged back to false on element reset

您可以通过类(.inUse、.active、.hovered等)处理动画和CSS更改，然后运行一个循环来检查是否有任何元素具有“活动”类

const pageChanged = () => {
  if(Array.from(document.querySelectorAll(".inUse")).length > 0) {
    return false
  } else {
    return true
  }
}

编辑:另外，关于动画，当你知道怎么做的时候，它们是相当简单的！我建议你看看W3Schools在@keyframes上的文章

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

你也可以设置动画方向为正向，反向等，这是非常健壮的！

票数 0

Stack Overflow用户

发布于 2019-04-26 04:07:20

通过继续挖掘，我找到了答案。这比我想象的要简单得多。由于我希望在将鼠标悬停在卡片上时获得平滑的动画效果，因此我使用了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');
            }
        }
    }
}

其中，卡片卡是“”元素的数组。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55853217

复制

相似问题

问有没有一种方法可以确保所有元素在再次操作之前都已重置到原始位置？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种方法可以确保所有元素在再次操作之前都已重置到原始位置？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种方法可以确保所有元素在再次操作之前都已重置到原始位置？
EN