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); 
 
}); 
 
\t \t 
 
$(".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>