Question

单击按钮后，元素应移至第二位置。它似乎只能与我不想使用的!important一起使用的最后一个元素。这是我的代码：

let ruch = document.querySelectorAll('.menu');
let myArray = Array.from(ruch);

let btn = document.getElementById('btn');
btn.addEventListener('click', function () {
  myArray.forEach(function (item) {
    if (item == myArray[0]) {
      item.classList.add('run1');
    } else if (item == myArray [4]) {
      item.classList.add('run2');
    } else {
      item.classList.add('run');
    }
  });
});

body {
  background-color: #302e2e;
  font-size:22px;
}
#btn{
  position: absolute;
  left: 914px;
  top: 180px;
}
.wrapper{
  position: relative;
  width:600px;
  margin: 0 auto;
}
.container{
  position:absolute;
  top:250px;
  width:0px;
}
.menu{
  padding:5px;
  border:1px solid #323232;
  width:100px;
  height:100px;
  background:#46f4a0;
  border-radius:20px;
  position: absolute;
  box-sizing: border-box;
}
.menu:nth-child(2){
  left:105px;
}
.menu:nth-child(3){
  left:210px;
}
.menu:nth-child(4){
  left:315px;
}
.menu:nth-child(5){
  left:420px;
}
.run{
  opacity: 0;
  transition:3s ease-in-out;
  z-index: -1;
  top:110px;
}
.run1{
  opacity: 0;
  transition:3s ease-in-out;
  z-index: -1;
  left:-110px;
}
.run2{
  opacity: 0;
  transition:3s ease-in-out;
  z-index: -1;
  left:530px!important;
}

<button id="btn">
    Kliknij
  </button>
  <div class="wrapper">
    <div class="container ">
      <div class="menu ">About</div>
      <div class="menu ">My Projets</div>
      <div class="menu ">Some stuff</div>
      <div class="menu ">Werid shits</div>
      <div class="menu ">Contact</div>
    </div>
  </div>

感谢您的帮助

Answer 1

喜欢吗？（complementary CodePen）

let menuItems = Array.from(document.querySelectorAll(".menu"));

document.getElementById("btn").addEventListener("click", function() {
  menuItems[0].classList.add("run1");
  menuItems[4].classList.add("run2");
  menuItems.slice(1, 4).forEach(function(item) {
      item.classList.add("run");
  });
});

body {
  background-color: #302e2e;
  font-size: 22px;
}
#btn {
  position: absolute;
  left: 914px;
  top: 180px;
}
.wrapper {
  position: relative;
  width: 600px;
  margin: 0 auto;
}
.container {
  position: absolute;
  top: 250px;
  width: 0px;
}
.menu {
  padding: 5px;
  border: 1px solid #323232;
  width: 100px;
  height: 100px;
  background: #46f4a0;
  border-radius: 20px;
  position: absolute;
  box-sizing: border-box;
}
.menu:nth-child(2) {
  left: 105px;
}
.menu:nth-child(3) {
  left: 210px;
}
.menu:nth-child(4) {
  left: 315px;
}
.menu:nth-child(5) {
  left: 420px;
}
.menu.run {
  opacity: 0;
  transition: 3s ease-in-out;
  transform: translateY(110px);
}
.menu.run1 {
  opacity: 0;
  transition: 3s ease-in-out;
  transform: translateX(-110px);
}
.menu.run2 {
  opacity: 0;
  transition: 3s ease-in-out;
  transform: translateX(110px);
}

<button id="btn">Kliknij</button>
<div class="wrapper">
  <div class="container">
    <div class="menu">About</div>
    <div class="menu">My Projets</div>
    <div class="menu">Some stuff</div>
    <div class="menu">Werid shits</div>
    <div class="menu">Contact</div>
  </div>
</div>

也请再次查看您的CSS。您应该避免仅使用绝对定位和像素值，因为在每个设备上它看起来都不同。

Answer 2

U需要将过渡移到'.menu'，它看起来应该像这样：transition:3s transform ease-in-out;。并在'.run'，'。run1'，'。run2'中将其替换为transform: translateX(/*value*/px);。并将top替换为transform: translateY(/*value*/px);。

十分之一的div转换正确

2 个答案: