CSS动画 - 位置到原始位置

Question

我今天想玩css动画.

所以我的基本想法是创建四个圆圈然后当用户点击该圆圈然后它应该到页面的中心然后它应该变成其他形状.

所以我使用了变换和动画属性.

这是我写的代码到现在为止.

$(".circle").click(function(){
  if($(this).hasClass('centerOfPage')){
    $(this).removeClass('centerOfPage');
  }else{
    $(this).addClass('centerOfPage');
  }
});

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 10px;
}
.one{
  background-color: red;
}
.two{
  background-color: blue;
}
.three{
  background-color: yellow;
}
.four{
  background-color: green;
}

 .centerOfPage{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 5%;
   -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    animation : centerOfPageAnimate 3s;
   
}
@keyframes centerOfPageAnimate {
  0% {
    top: 0%;
    left: 0%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transform: translate(0, 0);    
  }
  100% {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 5%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="circle one"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
  <div class="circle four"></div>
</div>

现在这里有一些你会注意到的问题..

• 当您点击任何圆圈时,他们的动画将从顶角开始,而不是从它们所在的位置开始.
• 当你再次点击div然后他们回到他们的位置,但它没有动画,我再次希望从其他形状的动画循环到他们的相同位置.

这是同样的codepen.谢谢.

Answer 1

由于您已经在使用 jQuery，我决定 100% 使用它。我的代码和你的代码之间的主要区别是，我在加载时存储每个圆圈位置，并且不依赖 CSS3 关键帧。

我使用 jQuery .data 方法存储加载时的圆位置。现在，当您删除“centerOfPage”类时，您可以使用 jQuery 恢复到之前存储的圆圈位置。

请参阅 jQuery 代码片段和 Codepen

$('.circle').each(function () {
  $(this).data('circlePosTop', $(this).position().top);
});
		
$(".circle").click(function(){
 if($(this).hasClass('centerOfPage')){
   $(this).animate({top:$(this).data('circlePosTop'),left:0,borderRadius:'50%',height:'100px',width:'100px'}).removeClass('centerOfPage');
 } else {
   $(this).addClass('centerOfPage').animate({top:0,left:0,borderRadius:'5%',height:'100%',width:'100%'});
 }
});

http://codepen.io/anon/pen/OyWVyP