Question

我今天想玩css动画。

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

所以我使用过，变换和动画属性。

这是我写的代码。

＆＃13;

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

＆＃13;

.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%;
  }
}

＆＃13;

<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>

＆＃13;

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

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

以下是codepen。感谢。

Answer 1

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

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

请参阅jQuery Snippet和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

Answer 2

@nitz JQuery非常重，应该尽可能少地使用这种类型的视觉变化。你这样做是对的。

您需要通过关键帧删除动画，它更复杂。

请试试这个：

$(".circle").click(function(){
  $(this).toggleClass("centerOfPage");
});

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: fixed;
  left: 30px;
  
  -moz-transition: all 0.5s ease .2s;
  -o-transition: all 0.5s ease .2s;
  -webkit-transition: all 0.5s ease .2s;
  transition: all 0.5s ease .2s; 
}
.one{
  background-color: red;
  top: 10px;
}
.two{
  background-color: blue;
  top: 120px;
}
.three{
  background-color: yellow;
  top: 230px;
}
.four{
  background-color: green;
  top: 340px;
}

 .centerOfPage{
   width: 100%;
   height: 100%;
   top: 0; bottom: 0;
   left: 0; right: 0;
   border-radius: 0; 
   z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

Answer 3

这可能是你想要的吗？

centerOfPage类现在只在那里开始动画，没有额外的定位，并且在关键帧声明中使用％我们可以先将它移动到页面的中心然后使其变大（如果在步骤之间添加，则可以添加你想要的）

$(".circle").click(function(){
  $(this).toggleClass('centerOfPage'); //toggleClass saves you the if else
 });

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 10px;
  transition: all 2s linear;  /* added transition to animate going back to start state*/
}
.one{
  background-color: red;
    
}
.two{
  background-color: blue;
}
.three{
  background-color: yellow;
}
.four{
  background-color: green;
}

 .centerOfPage{
   
    animation: test 2s forwards; /* add "forwards" here to stop the animation at end-frame */
  }


  @keyframes test{
   /* You can use percent to target steps during your animation:
      here it moves to the center at 10% animation duration and gets bigger    at 100 % animation duration 
    */
  10%{
  transform: translate(50%);
  }
  100%{
  width: 100vw;
  height: 100vh;
   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>

CSS动画 - 位置到原始位置

3 个答案: