我今天想玩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%);
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相同.
谢谢.
解决方法
由于您已经在使用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,borderRadius:'5%',height:'100%',width:'100%'});
}
});
