CSS animasyonu - orijinal yerine konum

Question

Bugün css animasyonu ile oynamak istedim.

Temel fikrim dört daire oluşturmaktı, ardından kullanıcı o çevreye tıkladığında sayfanın ortasına gitmeli ve sonra başka bir şekil almalıdır.

Bu yüzden kullandım, dönüştürdüm ve animasyon özellikleri.

Bu, şimdiye kadar yazdığım kod.

$(".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>

Şimdi Burada göreceksiniz bazı sorunlar .. vardır

• herhangi çevrelerin tıkladığınızda sonra kendi animasyon değil Bulunduklarıyerden üst köşeden başlayacaktır .
• Tekrar div'a tıkladığınızda, tekrar konumlarına geri dönüyorlar ancak animasyonlu değiller, yine bu animasyonu diğer şekillerden daire içine ve aynı konuma getirmelerini istiyorum.

İşte aynı için codepen. Teşekkürler.

Answer 1

JQuery'yi kullandığınız için% 100 kullanmaya karar verdim. Kodlarım ile sizinki arasındaki temel fark, her bir çevre konumunu yük altında saklıyorum ve CSS3 anahtar karelerine güvenmem.

JQuery .data yöntemini kullanarak yükteki daire konumlarını kaydediyorum. Artık 'centerOfPage' sınıfını kaldırdığınızda jQuery'yi kullanarak önceden depolanmış olan çevrelere geri dönebilirsiniz.

Bkz jQuery Pasaj ve 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 son derece ağırdır ve görsel değişikliklerin bu tür mümkün olduğunca az kullanılmalıdır. Bunu doğru yapıyorsun.

Animasyonu ana karelere göre kaldırmanız gerekiyor, bu daha karmaşık.

bu deneyin:

$(".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

bu belki mi aradığınız ne var?

centerOfPage sınıfı artık yalnızca animasyonu başlatmak, ek konumlandırma yapmak ve anahtar karesi bildiriminde% kullanmak için, önce sayfanın ortasına taşıyabilir ve daha sonra onu büyütebiliriz (ayrıca, adım adım ekleyebilirsin) Eğer “nerede olduklarını başlamak” gelmez tabii

$(".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>