CSS3 animacje Webkit CSS: div zmienić rozmiar prostokąta

Question

staram się zrozumieć, jeśli jest to możliwe do powtórzenia metody animate w jQuery, z wykorzystaniem animacji WebKit

Zakładając Mam div 50px o 50 px użyciu jquery mogę łatwo zmienić rozmiar i animować je, używając:

$('#mybox').animate({'width':'100px','height':'70px'}, 300) 

// so from 50x50 it animates to 100x70 
// the values 100 and 70 should ba dynamically 
// input so i can create a function (Width,Height) to alter my box 

zastanawiam się, jak zrobić to samo, jeśli to możliwe za pomocą CSS animacje WebKit

PS. I nie trzeba ich do pracy w Firefoksie, to tylko projekt dla Safari/Chrome

Answer 1

tej można użyć CSS:

div.mybox { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    transition:width 300ms ease-in-out, height 300ms ease-in-out; 
} 

Następnie można zaktualizować właściwości width i height użyciu jQuery:

$(document).ready(function() { 
    $("div.mybox").css({"width": "100px", "height": "70px"}); 
}); 

Tak więc, jeśli przeglądarka go obsługuje, będzie animowana. Ale oczywiście rozważ umieszczenie tych właściwości w oddzielnej klasie i dodanie tej klasy do elementu. Możesz użyć funkcji .addClass(), w ten sposób.

$(document).ready(function() { 
    $("div.mybox").addClass("enlarged"); 
}); 

Albo, na przykład, można go używać z funkcją toggleClass i zdarzenia click (skrzynka zostanie powiększona po kliknięciu, i przejdzie do normalnego rozmiaru, gdy ponownie kliknij).

$(document).ready(function() { 
    $("div.mybox").click(function() { 
     $(this).toggleClass("enlarged"); 
    }); 
}); 

W tym przypadku właściwości należy zdefiniować w klasie CSS.

div.mybox.enlarged { 
    width: 100px; 
    height: 70px; 
} 

Ponadto, jeśli chcesz animacja wydarzy na myszy nad, to wszystko trzeba dodać to:

div.mybox:hover { 
    width: 100px; 
    height: 70px; 
} 

Animacje tego rodzaju mogą być wykonywane bez użycia JS w ogóle.

Należy również przeczytać o CSS3 transition attribute i funkcjach przekształcania (mogą one być użyteczne w wielu przypadkach). Są one opisane here.

Answer 2

@keyframes animationName { 
    0% {width: 50px; height:50px} 
    100% {width: 100px; height:70px} 
} 

spojrzeć na to: http://www.css3files.com/animation/

Answer 3

Można używać animacji CSS i przejścia z „dynamiczne” wartości przez zastosowanie CSS jako nowy arkusz stylów lub stylu inline, jak w tym przypadku:

http://jsfiddle.net/4zD74/

Answer 4

CSS3 bardzo ci to ułatwi! Dodaje przejście i możesz zmienić wymiary za pomocą :hover. Oto próbka div:

<div id="mydiv"> 
    <!-- Div content goes here --> 
</div> 

Twój div to "mydiv".Reszta odbywa się w CSS3:

#mydiv { 
    width: 50px; 
    height: 50px; 
    background: #f34543; 
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    transition:width 300ms ease-in-out, height 300ms ease-in-out; 
} 
#mydiv:hover { 
    width: 100px; 
    height: 70px; 
} 

JSFiddle: http://jsfiddle.net/dakoder/ZGHLM/

to jest to! Rozmiar zostanie zmieniony z 50 x 50 pikseli na 100 x 70 pikseli. Testowane w Chrome, ale jeszcze nie Safari.