webentwicklung-frage-antwort-db.com.de

CSS-Übergang funktioniert nicht für prozentuale Höhe?

Ich habe die folgenden CSS-Definitionen:

.detailsCollapsed
{
   display:none;
   height:0%;
   width:100%;
   -webkit-transition:height 40s ease-in-out;
}

.detailsExpanded
{
    display:block;
    visibility:visible;
    height:100%;
    width:100%;
    -webkit-transition:height 40s ease-in-out;
}

Diese werden auf ein Div mit einem Inhalt angewendet.

Ich habe auch etwas Javascript, das, wenn ein div geklickt wird, den Klassennamen auf dem Element ändert. Dies funktioniert gut zum Erweitern und Zusammenfallen, aber es gibt keine Animationen auf dem iPhone? (Alle anderen Übergänge, die ich ausprobiert habe, funktionieren gut mit fließender Animation.) Irgendwelche Ideen?

41
Patrick

Die (reine CSS) -Lösung bisher

Wenn Sie height:auto; verlassen und feste Werte von max-height verwenden, können Sie einen Übergang simulieren:

.details-expanded {
    max-height: 300px; /* try to guess a max-height for your content */
}

.details-collapsed {
    height: auto;
    max-height: 0;
    transition: max-height 500ms linear; /* pick a proportional duration */
}

Beachten Sie die Übergangsdauer und max-height, wenn das Element erweitert wird. Spielen Sie mit den Werten, bis Sie das gewünschte Verhalten erhalten.

Auf diese Weise können Sie einen Übergang zwischen zwei definierten Werten erhalten (im obigen Beispiel von 0 bis 300), während die height-Eigenschaft dem max-height-Übergang "folgt" und so lange wächst, bis die Größe des Inhalts erreicht wird.


Demos

DEMO 1 - ein funktionierendes Beispiel für diese Lösung

DEMO 2 - nur Demonstration der Vorgänge in DEMO 1


Beobachtungen

Zur Zeit werden Übergänge nur zwischen vordefinierten Werten implementiert, und ich nehme an, dass die Engine in einigen Fällen den Anfangs- oder Endwert nicht schätzen kann. Was ist, wenn Sie einen Höhenübergang haben, dessen Endwert 50% beträgt, aber der Übergang selbst die Höhe des Elternteils irgendwie beeinflusst ?! Dies würde wahrscheinlich mehrere reflow - Berechnungen für jeden Frame erfordern, was zu Leistungsproblemen führen kann. 

Wie fabb angibt, legt die Spezifikation für CSS-Übergänge fest, dass Prozentwerte unterstützt werden sollten. Es kann also nur eine Frage der Zeit sein, bis Engines entscheidet, in welchen Fällen sie Übergänge mit dynamischen Werten unterstützen Punkte. Ich bin mir jedoch nicht sicher, was als korrektes Verhalten für auto-Werte betrachtet werden könnte.

63
kbtzr

Gemäß der W3C-Spezifikation für CSS3-Übergänge sollten sowohl length als auch percent für einen Übergang in der Eigenschaft height zulässig sein. Ich denke, es ist nur eine Frage der Zeit, bis die Angabe eines Prozentsatzes in Browsern möglich ist.

16
fabb

ich hatte das gleiche Problem. Der Übergang funktionierte gut, wenn er "kollabierte", erschien jedoch ohne Übergang (wie "Einschalten") beim "Erweitern", wenn zuvor "Anzeige: keine" eingestellt war.

Beim Debugging bin ich aus Versehen zu einer funktionierenden Lösung gekommen: Die einfache Abfrage von "offsetHeight" scheint ein internes Re-Rendering des Elements zu erzwingen. 

etwas wie das: 

    showElement = function(){
       ...
       oEl.style.display = "block";
       var xDump = oEl.offsetHeight;
       oEl.className = "show";
    }

xDump wird nie verwendet, aber es hat den Unterschied gemacht.

3
DDTech

Ich habe die folgende Lösung für Elemente verwendet, bei denen ich zwischen Anzeige keine und Block wechseln muss und den Übergangseffekt beibehalten muss:

function slidedown(element) {
    ...
    element.style.display = "block";
    var timerId = setTimeout(function(){
        element.style.webkitTransitionProperty = "height";
        element.style.webkitTransitionTiming = "linear";
        element.style.webkitTransitionDuration = "3.5s";
        element.style.height = "500px";
    }, 0);
    ...
}

die Funktion setTimeout erzwingt eine kurze Verzögerung, die den Übergang nach dem Umschalten der Anzeigeeigenschaft ermöglicht. Ich hoffe es hilft.

2
Christian

Es ist der Wechsel von Anzeige: Keine Anzeige: Block, der den Übergang stoppt. Stellen Sie den reduzierten Stil für die Anzeige ein: block; Höhe: 0; Überlauf versteckt;

Hinweis: Eine erweiterte Höhe von auto stoppt auch den Übergang. Wenn auf dem umschließenden Block keine Höhe eingestellt ist, entspricht eine Höhe von 100% der Höhe von auto.

1
Nicholas

Ich hoffe, Sie haben sich bereits damit beschäftigt, aber ich schreibe nur, um zu sagen, dass ich das gleiche Problem habe: WebKit, zumindest unter iOS 4.1, animiert keinen Übergang, wenn er für ein Element definiert wurde, das mit "display: none" gekennzeichnet ist ; ", genau wie Nicholas oben erwähnt.

Wenn es Ihr Anliegen ist, dieses Element nicht zu rendern, ist Leistung, wie in meinem Fall, dann schlage ich eine andere Lösung vor, als die Höhe auf 0 festzulegen. Speichern Sie das Element in Ihrem onLoad-Ereignisrückruf in einer Variablen und entfernen Sie es aus dem DOM. Setzen Sie es dann erneut ein, wenn es Zeit ist, es zu zeigen.

0
Adrian Ghizaru

Hier ist eine Lösung für diejenigen, die Prozentsätze verwenden möchten. 

Der Trick besteht darin, es in einem div mit einer festgelegten Höhe und Breite zu enthalten. Wenn Sie schwebende Container-Divs verwenden, ist dies möglicherweise nicht ideal, aber wenn Sie Container absolut positionieren, sollte dies ziemlich gut funktionieren und solange sich Elemente nicht überlappen. 

hier ist der Code

.container {
    width: 500px; 
    height: 500px; 
    background: transparent;
}
.expand-content{
    height: 0%; 
    color: #fff;
    background: green;
}
.expand-content:hover {
    height: 100%; 
    background: orange;
    transition: all 2s ease;
}
.expand-content p  {
    font-size: 35px; 
    text-align: center;     
}
<div class="container">
    <div class="expand-content">
        <p>Expanded Content</p>
    </div>
</div>

auf JSFiddle: http://jsfiddle.net/jtZ8j/7/

0
JCBrown

CSS-Lösung ohne Berechnung der maximalen Höhe

Hier ist meine Lösung, wenn die Gesamthöhe nicht bekannt ist

.container{
  
  overflow:hidden;
  max-height:20px;
  transition-property: max-height;
  -webkit-transition-property: max-height;
  transition-delay: 1s; /*Set a delay for this css-propery so content also slides up*/
  -webkit-transition-delay: 1s;
}
.container .content{
  z-index:5;
  background-color:LightGray;
  
  margin-top:20px;
  transform:translateY(-100%);
  -webkit-transform:translateY(-100%);
  transition:transform 1s;
  -webkit-transition:transform 1s;
}
.container:hover{
  max-height:9999px; /*apparently "none" doesnt work*/
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}
.container:hover .content{
  
  transform:translateY(0);
  -webkit-transform:translateY(0);
}

/*Less interesting stuff below*/
body{
  background-color:navy;
}
div,label{
  margin:0;
  padding:0;
}
.container label{ /*Just a label to describe what you can do here*/
  height:20px;
  line-height:20px;
  display:block;
  z-index:10;
  position:absolute;
  background-color:maroon;
  width:100%;  
}
<body>
<div class="container">
<label>
Hover container
</label>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis congue lectus pharetra interdum. Cras sit amet interdum ipsum, vel commodo ante. Maecenas quis libero eu tortor suscipit rutrum. Cras quam eros, malesuada ac semper sed, viverra condimentum nisl. Quisque lobortis porta purus non fringilla. Fusce erat eros, aliquam a diam quis, ullamcorper laoreet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra scelerisque felis, vitae finibus dui lobortis non. Mauris iaculis rutrum vehicula. Nullam porta arcu et diam porta, in tristique nisl ornare. Mauris id ex maximus, lobortis erat a, laoreet justo.

Nullam tempus neque enim, nec consectetur enim fringilla ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin non rutrum nisl, sed vestibulum augue. Sed ac magna et metus tempus bibendum elementum id libero. Sed semper imperdiet risus et pellentesque. Aliquam commodo magna at rhoncus pellentesque. Vivamus tempus tellus lorem, a volutpat est pharetra nec. Vestibulum velit ligula, aliquet sit amet bibendum eget, viverra scelerisque tellus. Cras aliquam hendrerit bibendum. Etiam non faucibus nisi, sit amet cursus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Maecenas in eros ac elit pretium molestie. Mauris quis dolor erat. Suspendisse scelerisque gravida libero, rutrum consectetur metus ultrices in. Fusce eleifend, orci vitae sodales dictum, lectus nunc volutpat nulla, in efficitur dolor augue sed lorem. Nam ac lectus ultrices, ornare magna non, auctor neque. Mauris eros eros, bibendum commodo dolor non, posuere ultrices leo. Nullam ut laoreet ligula. Nulla posuere risus nec nibh fermentum, pretium consequat tellus eleifend. Vestibulum volutpat nisl quis euismod pulvinar. Donec hendrerit augue sed dui volutpat ultrices. Pellentesque mollis scelerisque metus, vulputate viverra risus pellentesque et. Duis nisi ante, faucibus in nunc et, semper varius turpis. Vivamus pharetra volutpat convallis.

Curabitur quis urna in orci tincidunt cursus vel ac dolor. Integer turpis augue, maximus eu lectus a, euismod consequat risus. Fusce leo lacus, dignissim vel sapien at, venenatis porttitor dui. Donec in metus non ex facilisis venenatis. In ac urna non tellus lobortis fringilla. Maecenas ornare dui nisl, gravida ornare purus aliquam in. Cras nec tortor eget neque volutpat pulvinar. In vestibulum, ante ut pharetra semper, nulla libero tincidunt nunc, a convallis orci dolor vel metus. Vivamus enim est, volutpat sit amet sagittis ut, efficitur at lacus. Morbi laoreet erat sit amet finibus finibus. Nulla sodales ut est non commodo. Aliquam sed purus a magna vehicula ullamcorper et id nunc. Curabitur aliquet tempor odio, euismod tempor ante consectetur ut. Proin neque sem, imperdiet sed est quis, ultricies tincidunt sem.

Donec nec sem id eros congue convallis eu in nibh. Etiam viverra sollicitudin maximus. In hac habitasse platea dictumst. Ut quis porta turpis. Duis egestas quam diam, id bibendum dolor imperdiet quis. Praesent ac odio in neque ultrices commodo. Nullam ac lacus sit amet dolor rhoncus tincidunt.
</div>
</div>
</body>

Arbeitsbeispiel

0