CSS Animation - Position zum ursprünglichen Platz

Ich wollte heute mit CSS-Animation spielen.CSS Animation - Position zum ursprünglichen Platz

So war meine Grundidee vier Kreis dann zu erstellen, wenn Benutzer klickt auf diesem Kreis dann sollte es zur Mitte der Seite und dann soll es eine andere Form sein.

So habe ich verwendet, Transformation und Animation Eigenschaften.

Dies ist Code, den ich bis jetzt geschrieben habe.

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

jetzt Hier gibt es einige Probleme, die Sie bemerken werden ..

Wenn Sie auf alle Kreise klicken, dann wird ihre Animation aus oberen Ecke beginnen nicht, wo sie sind .
Wenn Sie wieder auf div klicken dann auf ihre Position, sie gehen zurück, aber sein nicht animierte, wieder mag ich, dass die Animation von anderer Form zu Kreis und auf ihre gleiche Position.

Hier ist codepen für die gleiche. Danke.

Quelle

2015-09-26 Nitish

natürlich ist es „ab, wo sie sind“ nicht, wenn Sie Elemente wechseln, die überhaupt nicht vor positioniert wurden, zu 'Position: fixed' ... – CBroe

@nitz: Hier ist was ** [GSAP] (http://greensock.com/gsap) ** kann tun, um yo Ihre Animation: ** [Codepen] (http://codepen.io/tah_med/pen/pjNReG?editors=001) **. Dies ist nur eine kurze Demo, viele Dinge können hier verbessert werden. Aber es sollte Ihnen eine Idee über GSAP geben. Ich weiß, das ist nicht das, wonach du gefragt hast, aber ich dachte, ich sollte dich vorstellen, wenn du es nicht schon wusstest. –

Da Sie bereits jQuery verwenden habe ich beschlossen, es zu 100% zu nutzen. Der Hauptunterschied zwischen meinem und Ihrem Code besteht darin, dass ich jede Position der Kreise beim Laden abspeichere und nicht auf CSS3-Keyframes angewiesen bin.

Ich speichere die Kreispositionen auf Belastung durch die Methode jQuery .data verwenden. Wenn Sie nun die Klasse 'centerOfPage' entfernen, können Sie mit jQuery zu der zuvor gespeicherten Position der Kreise zurückkehren.

Siehe jQuery Snippet und 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

Quelle

2015-09-29 15:17:10

stimme ich überhaupt nicht zu. JQuery ist extrem schwer und sollte für diese Art von visuellen Änderungen so wenig wie möglich verwendet werden. –

@SofiaFerreira, "extrem schwer" in welchem Sinne? jQuery (genauer gesagt, JavaScript) Animationen existieren schon lange bevor CSS Animationen verfügbar waren. Hardware ist heute besser als Hardware "damals", also könnte man argumentieren, dass es heute weniger wichtig ist als früher. Der einzige Nachteil von JavaScript-basierten Animationen besteht darin, dass sie (normalerweise) nicht die ** Hardwarebeschleunigung ** nutzen, eine Optimierung, die Sie aus CSS-basierten Animationen ziehen können. –

@nitz JQuery ist extrem schwer, und es sollte für diese Art von optischen Veränderungen so wenig wie möglich verwendet werden. Du machst das richtig.

Sie benötigen die Animation von Keyframes zu entfernen, ist es komplexer ist.

Bitte versuchen Sie dies:

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

Quelle

2016-08-25 12:02:05

Wenn Sie dafür plädieren, jquery für diese Art von Anwendungen nicht zu verwenden, scheint es mir logisch zu sein, den Javascript Teil plain Javascript zu machen, nicht wahr? Es ist nur ein kleiner Code – JohannesB

Ist das vielleicht, was Sie suchen?

Die centerOfPage-Klasse ist jetzt nur zum Starten der Animation verfügbar, keine zusätzliche Positionierung und in der Keyframe-Deklaration% können wir sie zuerst in die Mitte der Seite verschieben und dann vergrößern (Sie können auch Zwischenschritte hinzufügen) wenn Sie möchten)

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

Quelle

2017-06-06 15:59:51 rebecca

CSS Animation - Position zum ursprünglichen Platz

Antwort

Verwandte Themen