CSS-Übergänge max-width und max-height

So, ich habe eine object innerhalb einer div container. Das Objekt hat die max-width (600px) und max-height (400px) Eigenschaften festgelegt. Wenn ich mit dem Objekt, die Eigenschaften werden festgelegt, um none so das Objekt width und height gerendert werden kann, richtig. Allerdings beim bewegen der Maus aus der object es sofort ändert es width und height zu den max-width (600px) und max-height (400px) Werte und nach einer Sekunde fällt es zurück zu seiner ursprünglichen width und height Werte.

Also, wie kann ich die übergänge machen die object ändern, es ist width und height reibungslos, sowohl, wenn die Maus über Sie und, wenn der Mauszeiger aus.

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;
}

Fiddle

InformationsquelleAutor Emanuel Vintilă | 2014-05-22
  1. 5

    Das problem ist, dass Sie nicht die Breite angegeben, die auf das übergeordnete element.

    Haben Sie Prozent auf Ihrem breiten object als 100%. 100%, was? Es ist die 100% Prozent des übergeordneten Elements Breite, Ihre div in diesem Fall. Wenn das übergeordnete element nicht die Breite angegeben, dann sind Sie am Ende mit solchen problem(s).

    Lösung: Geben Sie hier die Breite auf Ihre wrapper -div.

    Demo: 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;
}

    Hinweis: Idealerweise würdest du auch angeben height auf die Muttergesellschaft.

    Update:

    Solange die angegebene Breite auf der übergeordneten div ist innerhalb der Regeln der max-width es funktioniert gut. Allerdings, wenn die ursprüngliche Breite der Verletzung oder nähert sich der max-width Regel ist, dann wird die Umstellung nehmen Sie über den max-width und dann wird der snap-back-das original.

    Problem: Festlegung der übergang separat auf width und height wird nicht funktionieren, wie es versucht, um den übergang auf die Eigenschaften und somit max-es ignoriert. Damit ist der Spring-Effekt.

    Lösung: Erstens, geben Sie nicht die max-es als none. Denn Sie sind die Erhöhung der Bildgröße von 200%, geben Sie diese auch als 200%. Zweitens geben Sie übergang ohne spezifische Eigenschaften. Dadurch werden alle relevanten Eigenschaften der transition und wird dazu beitragen, das problem zu einem gewissen Grad.

    Demo 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%;
}

    Hoffe, das hilft.

    • Was ist, wenn ich nur benutzen wollen percentanges? Schauen Sie, ich habe Sie bearbeitet die post.
    • Das ist in Ordnung. Aber Sie haben noch nicht angegeben Breite/Höhe auf Ihre Eltern div. Sie werden haben das zu tun.
    • Was ist mit diesem Geige?
    • Hmmm... in diesem Fall, wenn die max-width verletzt wird, dann rastet es wieder. Ja. Gib mir etwas Zeit..
    • Es. Aktualisiert die Antwort.
    • Danke. Total mein problem gelöst. Du bist der beste!

    InformationsquelleAutor Abhitalks
  2. 0

    Wenn Sie ändern möchten max-width/max-height reibungslos, müssen Sie die max-* im minimierten Zustand, und legen Sie die Höhe/Breite zu 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
Schreibe einen Kommentar