在元素中添加动画

Question

我正在开发一个简单的应用程序，该应用程序可以在元素内部传输元素。 所以我有2种形状，正方形和圆形。首先，我必须先选择一个圆，然后再选择一个正方形，当我单击一个正方形时，我选择的圆圈将在正方形内移动。代码工作正常，只是，我必须添加动画，例如圆圈在我选择的正方形内移动。

希望你能理解我。

谢谢

CODEPEN

$('.circle').click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  var selected = $(this);

  $('.container .square').click(function() {
    $(this).addClass('selected');
    $(this).html(selected);
  });
});

.container {
  height: 230px;
  width: 110px;
  background-color: #eee;
  padding: 10px;
  position: relative;
  border: 1px solid #DDD;
}

.round {
  position: absolute;
  bottom: 10px;
}

.square {
  cursor: pointer;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid #f60;
  position: relative;
}

.square .circle {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.circle {
  cursor: pointer;
  display: inline-block;
  width: 45px;
  height: 45px;
  border: 1px solid green;
  border-radius: 100px;
  text-align: center;
  position: relative;
}

.circle span {
  width: 10px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.circle.selected {
  background-color: #FFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <div class="round">
    <div class="circle">
      <span>1</span>
    </div>
    <div class="circle">
      <span>2</span>
    </div>
    <div class="circle">
      <span>3</span>
    </div>
    <div class="circle">
      <span>4</span>
    </div>
  </div>
</div>

Answer 1

我认为您正在寻找下面的代码段。

问题是您不知道圆在哪里以及必须走到哪个正方形。 $selected.offset()是元素在屏幕上的位置，使用position: fixed可以将圆在屏幕上的位置移到原来的位置。

然后动画确保将圆从新位置动画到屏幕上正方形的位置（因此$this.offset，即正方形的位置）。

var $body = $('body'),
    $selected;

$('.round .circle').click(function(){
  $(this).addClass('selected').siblings().removeClass('selected');
  $selected = $(this);
});

$('.container .square').click(function(){
  if ($selected) {
    var $this = $(this);
    $selected.css({
      top: $selected.offset().top,
      left: $selected.offset().left,
      position: 'absolute'
    }).appendTo($body).animate({
      top: $this.offset().top + 2,
      left: $this.offset().left + 2
    }, 1000, function() {
      $(this).css({
        position: 'absolute',
        top: 'auto',
        left: 'auto',
      }).appendTo($this);
    });
    
    $this.addClass('selected');
  }
  
  $selected = undefined;
});

.container{
  height: 300px;
  width: 110px;
  background-color: #eee;
  padding: 10px;
  position: relative;
  border: 1px solid #DDD;
}
.round{
  position: absolute;
  bottom: 10px;
}
.square{
  cursor: pointer;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid #f60;
  position: relative;
}
.square .circle{
    position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.circle{
  cursor: pointer;
  display: inline-block;
  width: 45px;
  height: 45px;
  border: 1px solid green;
  border-radius: 100px;
  text-align: center;
  position: relative;
}
.circle span{
  width: 10px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.circle.selected{
  background-color: #FFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <div class="box">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
 <div class="round">
   <div class="circle">
     <span>1</span>
   </div>
   <div class="circle">
     <span>2</span>
   </div>
   <div class="circle">
     <span>3</span>
   </div>
   <div class="circle">
     <span>4</span>
   </div>
  </div>
</div>

一些想法：

结束动画后，可以再次将元素添加到正方形，并删除临时样式（顶部，左侧和位置）。但我认为您可以做到这一点：）

Answer 2

您可以在CSS转换中使用@keyframes，但下面的示例尚未进行优化，或者我的意思是正确实现，但您可以看到它的工作原理。非常感谢。

$('.circle').click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  var selected = $(this);

  $('.container .square').click(function() {
    $(this).addClass('selected');
    $(this).html(selected);
  });
});

.container {
  height: 230px;
  width: 110px;
  background-color: #eee;
  padding: 10px;
  position: relative;
  border: 1px solid #DDD;
}

.round {
  position: absolute;
  bottom: 10px;
}

.square {
  cursor: pointer;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid #f60;
  position: relative;
}

.square .circle {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.circle {
  cursor: pointer;
  display: inline-block;
  width: 45px;
  height: 45px;
  border: 1px solid green;
  border-radius: 100px;
  text-align: center;
  position: relative;
}

.circle span {
  width: 10px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.circle.selected {
  background-color: #FFFF;
  animation: fuckingmove 5s; 
}

@keyframes fuckingmove {
  from {top: 200px;}
  to {top: 0px;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <div class="round">
    <div class="circle">
      <span>1</span>
    </div>
    <div class="circle">
      <span>2</span>
    </div>
    <div class="circle">
      <span>3</span>
    </div>
    <div class="circle">
      <span>4</span>
    </div>
  </div>
</div>