Animacja CSS - pozycja do oryginalnego miejsca

Question

Chciałem dzisiaj zagrać w animację css.

Więc moim podstawowym pomysłem było stworzenie czterech kółek, a kiedy użytkownik kliknie na ten okrąg, powinien przejść do środka strony, a następnie powinien zmienić swój kształt.

Więc użyłem, transformacji i właściwości animacji.

To jest kod, który napisałem do tej pory.

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

Teraz tutaj są pewne problemy, które można zauważyć ..

• Po kliknięciu na wszelkich kręgów następnie ich animacja rozpocznie się od górnym rogu nie skąd są one .
• Po ponownym kliknięciu elementu div następuje powrót do ich położenia, ale nie jest on animowany, ponownie chcę, aby animacja z innego kształtu zakreśliła się i znalazła się w tej samej pozycji.

Oto codepen dla tego samego. Dzięki.

Answer 1

Ponieważ już używasz jQuery, zdecydowałem się użyć go w 100%. Główną różnicą między moim kodem a twoim jest to, że przechowuję każdą pozycję kółek przy obciążeniu i nie polegam na klatkach kluczowych CSS3.

Przechowuję pozycje koła przy obciążeniu przy użyciu metody jQuery .data. Teraz po usunięciu klasy "centerOfPage" możesz powrócić do wcześniej zapisanej pozycji w kręgach za pomocą jQuery.

See jQuery krótkiego opisu i 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 jest bardzo ciężki i należy go stosować w jak najmniejszym stopniu do tego typu zmian wizualnych. Robisz to dobrze.

Musisz usunąć animację według klatek kluczowych, jest bardziej złożona.

Spróbuj tego:

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

Czy to może być to, czego szukasz?

klasa centerOfPage jest teraz dostępna tylko po to, aby rozpocząć animację, bez dodatkowego pozycjonowania i używając% w deklaracji klatki kluczowej, możemy najpierw przenieść ją na środek strony, a następnie ją powiększyć (można również dodać między krokami jeśli chcesz)

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