Css3 Webkit les animations css: redimensionner une div rectangle

J'essaie de comprendre si il est possible de reproduire la méthode animate en Jquery, en utilisant webkit animations

En supposant que j'ai un div 50px par 50 px
à l'aide de jquery, je peux facilement les redimensionner et de les animer à l'aide de:

$('#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

Je me demande comment faire la même chose, si possible à l'aide de CSS WebKit animations

PS. Je n'ai pas besoin d'eux pour travailler dans firefox, c'est juste un projet pour un Safari/Chrome

InformationsquelleAutor Francesco | 2012-04-13

12

Vous pouvez utiliser ce 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;
}
```
Ensuite, vous pouvez mettre à jour les propriétés largeur et hauteur à l'aide de jQuery:
```
$(document).ready(function() {
    $("div.mybox").css({"width": "100px", "height": "70px"});
});
```
Donc, si le navigateur le supporte, ce seront animées. Mais, bien sûr, envisager de placer ces propriétés à une classe distincte et l'ajout de cette classe à l'élément. Vous pouvez utiliser le .addClass (), fonction, comme ceci.
```
$(document).ready(function() {
    $("div.mybox").addClass("enlarged");
});
```
Ou, par exemple, vous pouvez l'utiliser avec la toggleClass de la fonction et de l'événement click (la boîte va être agrandie en cliquant dessus, puis passera à la taille normale quand on clique de nouveau).
```
$(document).ready(function() {
    $("div.mybox").click(function() {
        $(this).toggleClass("enlarged");
    });
});
```
Dans ce cas, les propriétés doivent être définies dans la classe CSS.
```
div.mybox.enlarged {
    width: 100px;
    height: 70px;
}
```
Aussi, si vous souhaitez que l'animation se produire sur le dessus de la souris, puis tout ce que vous avez à ajouter est: est-ce
```
div.mybox:hover {
    width: 100px;
    height: 70px;
}
```
Des Animations de ce genre ne peut être réalisée sans l'aide de JS à tous.

Aussi, vous devriez lire à propos de CSS3 transition attribut et de la transformation des fonctions (ils peuvent être utilisables dans de nombreux cas). Ils sont décrits ici.
- Pouvez-vous faire un JSFiddle
InformationsquelleAutor Arseny

CSS3 fera cela très facile pour vous! Il va ajouter une transition, et vous pouvez modifier les dimensions avec :hover. Voici l'exemple de div:

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

Donc, ton div est "mydiv". Le reste est fait en 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/

Que c'est! Il va la redimensionner de 50x50px à 100x70px. Testé sur Chrome, mais pas Safari, encore.

C'est la meilleure réponse!

InformationsquelleAutor DaKoder

1
```
@keyframes animationName {
    0% {width: 50px; height:50px}
    100% {width: 100px; height:70px}
}
```
prendre un coup d'oeil à ceci:
http://www.css3files.com/animation/
- mmm pas sûr que ça aide, j'ai besoin de dynamique d'entrée de la taille de la div
- Si vous voulez dynamique d'entrée de la taille, vous ne pouvez utiliser JS pour ce faire.
- Non, vous ne le font pas. Voici comment faire: jsfiddle.net/4zD74. Vous pouvez également ajouter ce que une nouvelle feuille de style.
- C'est javascript 🙂
- De la sorte? Il a besoin des valeurs dynamiques. Vous ne verrez pas que dans le CSS pour un certain temps.
InformationsquelleAutor WolvDev
0

Vous pouvez utiliser les CSS des animations et des transitions avec "dynamique" des valeurs en appliquant CSS comme une nouvelle feuille de style ou de style en ligne comme dans ce cas:

http://jsfiddle.net/4zD74/

InformationsquelleAutor Mircea

Vous devez vous connecter pour publier un commentaire.