Question

我正在研究一个简单的盒子，它可以改变点击位置。所以我有三个框，我只能选择第二个和第三个框，因为我想将选择的框切换为第一个框。我设法通过替换他们的班级来切换他们，我的问题是我不知道如何添加他们正在切换的动画。

希望你能帮助我。

谢谢。

$('.container .card').click(function() {

  if ($(this).hasClass('center')) {
    $('.card.left').removeClass('left').addClass('center');
    $(this).removeClass('center').addClass('left');
  }
  if ($(this).hasClass('right')) {
    $('.card.left').removeClass('left').addClass('right');
    $(this).removeClass('right').addClass('left');
  }

});

.container {
  position: relative;
  width: 500px;
  height: 75px;
  background-color: #DDD;
}

.card {
  position: absolute;
  width: 100px;
  height: 75px;
}

.left {
  left: 0;
}

.center {
  left: 0;
  right: 0;
  margin: 0 auto;
}

.right {
  right: 0;
}

.card.green {
  background-color: green;
}

.card.red {
  background-color: red;
}

.card.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="card left green"></div>
  <div class="card center blue"></div>
  <div class="card right red"></div>
</div>

Answer 1

如果您将所有CSS位置都更改为基于left，则可以在.card更改时将transition添加到left进行动画处理。

translateX允许您将元素沿其自身宽度的百分比左右移动。这使我们能够进行右对齐和居中对齐，而无需使用right。

$('.container .card').click(function() {

  if ($(this).hasClass('center')) {
    $('.card.left').removeClass('left').addClass('center');
    $(this).removeClass('center').addClass('left');
  }
  if ($(this).hasClass('right')) {
    $('.card.left').removeClass('left').addClass('right');
    $(this).removeClass('right').addClass('left');
  }

});

.container {
  position: relative;
  width: 500px;
  height: 75px;
  background-color: #DDD;
}

.card {
  position: absolute;
  width: 100px;
  height: 75px;
  transition: 0.5s all; /* Add a half-second transition */
}

.left {
  left: 0; 
}

.center {
  left: 50%;
  transform: translateX(-50%);
}

.right {
  left: 100%;
  transform: translateX(-100%);
}

.card.green {
  background-color: green;
}

.card.red {
  background-color: red;
}

.card.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="card left green"></div>
  <div class="card center blue"></div>
  <div class="card right red"></div>
</div>

在换班时为div设置动画

1 个答案: