Les Transitions CSS max-width et max-height

J'ai donc une object à l'intérieur d'un div conteneur. L'objet a la max-width (600px) et max-height (400px) définir les propriétés. Quand j'ai passez l'objet, les propriétés sont définies à none donc l'objet de width et height peut être rendu correctement. Cependant, lors du déplacement de la souris en dehors de la object il immédiatement changements, il est width et height à la max-width (600px) et max-height (400px) valeurs et après une seconde, il revient à l'état initial width et height valeurs.

Alors, comment puis-je faire les transitions pour rendre le object changement c'est width et height en douceur, à la fois, lors du survol et lorsque le pointeur de la souris hors.

HTML:

<html>
<!-- Blah blah some head tags here. -->
<body>
  <div id="c_a">
    <object data="https://www.google.ro/images/srpr/logo11w.png" type="image/png"></object>
  </div>
</body>
</html>

CSS:

html{
  font-size: larger;
  width: 100%;
  height: 100%;
}
#c_a object{
  transition: width 1s linear .5s, height 1s linear .5s;
  -webkit-transition: width 1s linear .5s, height 1s linear .5s;
  -o-transition: width 1s linear .5s, height 1s linear .5s;
  -moz-transition: width 1s linear .5s, height 1s linear .5s;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 600px;
  max-height: 400px;
  vertical-align: text-top;
}
#c_a object:hover{
  width: 200%;
  height: 200%;
  max-width: none;
  max-height: none;
}

Violon

InformationsquelleAutor Emanuel Vintilă | 2014-05-22

6

Le problème, c'est que vous n'avez pas la largeur spécifiée sur l'élément parent.

Vous avez pour cent des largeurs sur votre object comme 100%. 100% de quoi? C'est le 100% pour cent de la largeur de l'élément parent, votre div dans ce cas. Si l'élément parent n'a pas la largeur spécifiée, puis vous vous retrouvez avec un tel problème(s).

Solution: Spécifiez une largeur sur votre enveloppe div.

Démo: http://jsfiddle.net/abhitalks/Pv4y4/4/

CSS:
```
div#c_a { width: 200px; } /* specify width on parent here */

#c_a object {
    -webkit-transition: width 1s linear .5s, height 1s linear .5s;
    width: 100%;
    height: 100%;
    ...
}
#c_a object:hover {
    width: 200%;
    height: 200%;
    max-width: none;
    max-height: none;
}
```
Note: Idéalement, vous devez aussi spécifier height sur le parent.

Mise à jour:

Aussi long que la largeur spécifiée sur le parent div est dans les règles de max-width cela fonctionnera très bien. Cependant, une fois que la largeur initiale de manquements ou à l'approche de la max-width règle, puis la transition va prendre au-delà de la max-width puis reviennent à l'original.

Problème: Spécification de la transition séparément sur width et height ne fonctionnera pas comme il essaie de faire la transition sur les propriétés et donc max-es sont ignorés. D'où le saut effet.

Solution: tout d'Abord, Ne spécifiez pas le max-es comme none. Parce que vous êtes plus la taille de l'image à 200%, le préciser aussi que 200%. Ensuite, spécifiez transition comme telle, sans propriétés spécifiques. Ce qui rend toutes les propriétés pertinentes obtenir de transition et d'aider à atténuer le problème dans une certaine mesure.

Démo 2: http://jsfiddle.net/abhitalks/Pv4y4/9/

CSS:
```
html, body { width: 100%; }
div#c_a { width: 60%; }
#c_a object {
    -webkit-transition: 1s;
    ...
}
#c_a object:hover {
    width: 200%;
    height: 200%;
    max-width: 200%;
    max-height: 200%;
}
```
Espère que ça aide.
- Que faire si je veux seulement utiliser percentanges? Regardez, j'ai édité le post.
- C'est très bien. Mais vous n'avez pas encore spécifié toute la largeur/hauteur de vos parents div. Vous est avez à faire.
- Hmmm... dans ce cas, lorsque le max-width est violée, alors qu'il s'enclenche à nouveau. Oui. Donnez-moi un peu de temps..
- Il n'. Mise à jour de la réponse.
- Je vous remercie. C'est totalement résolu mon problème. Vous êtes les meilleurs!
InformationsquelleAutor Abhitalks

Si vous voulez changer max-width/max-height en douceur, vous devez spécifier le max-* dans l'état réduit et réglez la largeur/hauteur de auto:

#c_a object{ {
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 40px;
    display: block;
    transition-duration: 200ms;
    transition-delay: 1ms;
    transition: position 1s, left 1s, top 1s, width 1s, height 1s, max-width 1s, max-height 1s;
    transition-timing-function: ease;
}

#c_a object:hover {
    position: absolute;
    display: block;
    top: 100px !important;
    left: 0px !important;
    width: auto;
    height: auto;
    max-width: 500px;
    max-height: 200px;
}

InformationsquelleAutor Keith Hackworth

Vous devez vous connecter pour publier un commentaire.

Mise à jour: