it-swarm.com.de

Übergänge auf dem Display: Eigenschaft

Ich entwerfe derzeit ein CSS-Mega-Dropdown-Menü - im Grunde genommen ein reguläres Dropdown-Menü nur für CSS, das jedoch unterschiedliche Arten von Inhalten enthält.

Momentan anscheinend gelten CSS3-Übergänge nicht für die 'display'-Eigenschaft, dh Sie können keine Art von Übergang von display: none zu display: block ( oder eine beliebige Kombination).

Kann sich jemand eine Möglichkeit vorstellen, wie das Menü der zweiten Ebene aus dem obigen Beispiel "eingeblendet" werden kann, wenn sich jemand über einem der Menüelemente der obersten Ebene befindet?

Ich bin mir bewusst, dass Sie Übergänge für die Eigenschaft visibility: verwenden können, aber ich kann mir keine Möglichkeit vorstellen, dies effektiv zu nutzen.

Ich habe auch versucht, Höhe zu verwenden, aber das ist kläglich gescheitert.

Mir ist auch bewusst, dass es trivial ist, dies mit JavaScript zu erreichen, aber ich wollte mich dazu herausfordern, nur CSS zu verwenden, und ich denke, ich komme ein wenig zu kurz.

Alle Vorschläge sind herzlich willkommen.

1279
RichardTape

Sie können zwei oder mehr Übergänge verketten, und diesmal ist visibility praktisch.

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(Vergessen Sie nicht die Herstellerpräfixe für die Eigenschaft transition)

Weitere Details finden Sie in dieser Artikel

1219
Guillermo

Sie müssen das Element auf andere Weise ausblenden, damit dies funktioniert.

Ich habe den Effekt erreicht, indem ich beide <div>s absolut positioniert und die versteckte auf opacity: 0 gesetzt habe.

Wenn Sie sogar die Eigenschaft display von none auf block umschalten, wird Ihr Übergang zu anderen Elementen nicht ausgeführt.

Erlauben Sie dem Element immer, display: block zu sein, aber verbergen Sie das Element, indem Sie eines der folgenden Mittel anpassen:

  1. Stellen Sie height auf 0.
  2. Stellen Sie opacity auf 0.
  3. Positionieren Sie das Element außerhalb des Rahmens eines anderen Elements mit overflow: hidden.

Es gibt wahrscheinlich mehr Lösungen, aber Sie können keinen Übergang ausführen, wenn Sie das Element auf display: none umschalten. Sie können beispielsweise versuchen, Folgendes zu versuchen:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

Aber das wird nicht funktionieren. Aus meiner Erfahrung habe ich festgestellt, dass dies nichts zu tun hat.

Aus diesem Grund müssen Sie das Element display: block immer beibehalten - aber Sie können es umgehen, indem Sie Folgendes tun:

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}
741
Jim Jeffers

Zum Zeitpunkt dieses Beitrags deaktivieren alle gängigen Browser CSS-Übergänge, wenn Sie versuchen, die Eigenschaft display zu ändern, aber CSS-Animationen funktionieren weiterhin einwandfrei, sodass wir sie als Problemumgehung verwenden können.

Beispielcode: - (Sie können ihn entsprechend auf Ihr Menü anwenden) Demo

Fügen Sie Ihrem Stylesheet das folgende CSS hinzu: -

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

Wenden Sie dann die Animation fadeIn auf das übergeordnete Kind an: - (und setzen Sie natürlich display: block)

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

Update 2019 - Methode, die auch das Ausblenden unterstützt:

(Einige JS erforderlich)

// We need to keep track of faded in elements so we can apply fade out later in CSS
document.addEventListener('animationstart', function (e) {
  if (e.animationName === 'fade-in') {
      e.target.classList.add('did-fade-in');   
  }
});

document.addEventListener('animationend', function (e) {
  if (e.animationName === 'fade-out') {
      e.target.classList.remove('did-fade-in');
   }
});
div {
    border: 5px solid;
    padding: 10px;
}

div:hover {
    border-color: red;
}
 
.parent .child {
  display: none;
}
 
.parent:hover .child {
  display: block;
  animation: fade-in 1s;
}

.parent:not(:hover) .child.did-fade-in {
  display: block;
  animation: fade-out 1s;
} 

@keyframes fade-in {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

@keyframes fade-out {
  from { 
    opacity: 1; 
  }
  to { 
    opacity: 0;
  }
}
<div class="parent">
    Parent
    <div class="child">
        Child
    </div>
</div>
251
Salman for Hire

Ich vermute, dass der Grund, dass Übergänge deaktiviert werden, wenn "Anzeige" geändert wird, aufgrund dessen, was Anzeige tatsächlich tut. Es ändert nicht alles, was möglicherweise reibungslos animiert werden könnte.

"Display: none;" und "visible: hidden;" sind zwei vollständig verschiedene Dinge. Beides bewirkt, dass das Element unsichtbar wird, aber mit der Option "Sichtbarkeit: Ausgeblendet" wird es immer noch im Layout gerendert, jedoch nicht sichtbar. Das ausgeblendete Element nimmt immer noch Platz ein und wird immer noch inline oder als Block oder Block-Inline oder Tabelle gerendert, oder wie auch immer das "Anzeige" -Element es auffordert, zu rendern, und nimmt entsprechend Platz ein. Andere Elemente bewegen sich nicht automatisch, um diesen Raum einzunehmen. Das ausgeblendete Element gibt seine tatsächlichen Pixel nicht für die Ausgabe aus.

"Display: none" dagegen verhindert das Rendern des Elements vollständig. Es beansprucht nicht beliebig Platz im Layout. Andere Elemente, die einen Teil oder den gesamten von diesem Element belegten Platz belegt hätten, passen sich jetzt an, um diesen Platz zu belegen, als ob das Element einfach überhaupt nicht vorhanden.

"Anzeige" ist nicht nur ein weiteres visuelles Attribut. Hiermit wird der gesamte Wiedergabemodus des Elements festgelegt, z. B. ob es sich um einen Block, einen Inline-, einen Inline-Block, eine Tabelle, eine Tabellenzeile, eine Tabellenzelle, ein Listenelement oder etwas anderes handelt. Jedes von ihnen hat sehr unterschiedliche Layout-Auswirkungen, und es gibt keine vernünftige Möglichkeit, sie zu animieren oder reibungslos zu überführen (stellen Sie sich beispielsweise einen reibungslosen Übergang von „Block“ zu „Inline“ oder umgekehrt vor!).

Aus diesem Grund werden Übergänge deaktiviert, wenn sich die Anzeige ändert (auch wenn die Änderung auf „Keine“ oder von „Keine“ erfolgt - „Keine“ ist nicht nur unsichtbar, es ist ein eigener Element-Rendering-Modus, der überhaupt kein Rendering bedeutet!).

64
Joel_MMCC

display ist keine der Eigenschaften, mit denen der Übergang funktioniert.

Unter https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties finden Sie eine Liste der CSS-Eigenschaften, auf die Übergänge angewendet werden können. Informationen zur Interpolation finden Sie unter https://drafts.csswg.org/css-values-4/#combining-values .

Bis zu CSS3 wurde in https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/#animatable-css aufgeführt (schließen Sie einfach das Warn-Popup)

Ich habe auch versucht, Höhe zu verwenden, aber das ist kläglich gescheitert.

Das letzte Mal, als ich das machen musste, habe ich stattdessen max-height verwendet, eine animierbare Eigenschaft (obwohl es ein bisschen hack war, hat es funktioniert), aber hüte dich davor, dass es für komplexe Seiten oder Benutzer mit niedriger Auflösung sehr nervig sein kann. mobile Endgeräte.

49
robocat

Ich weiß, dass dies eine sehr alte Frage ist, aber für Leute, die sich diesen Thread ansehen, können Sie der Block-Eigenschaft jetzt eine benutzerdefinierte Animation hinzufügen.

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

Demo

In dieser Demo ändert sich das Untermenü von display:none zu display:block und es gelingt immer noch zu verblassen.

35
Manish Pradhan

Anstelle von Rückrufen, die in CSS nicht vorhanden sind, können wir die Eigenschaft transition-delay verwenden.

#selector {
    overflow: hidden; // hide the element content, while height = 0
    height: 0; opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: auto; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

Also, was ist hier los?

  1. Wenn die Klasse visible hinzugefügt wird, starten sowohl height als auch opacity die Animation ohne Verzögerung (0 ms), obwohl height zum Beenden der Animation 0 ms benötigt (entspricht display: block). und opacity dauert 600ms.

  2. Wenn die Klasse visible entfernt wird, startet opacity die Animation (Verzögerung 0 ms, Dauer 400 ms) und die Höhe wartet 400 ms. Erst dann wird der Anfangswert (entspricht display: none in der Animation) sofort wiederhergestellt Rückrufen).

Beachten Sie, dass dieser Ansatz besser ist als der mit visibility. In diesem Fall belegt das Element immer noch den Platz auf der Seite und ist nicht immer geeignet.

Weitere Beispiele finden Sie in diesem Artikel .

34
Webars

Laut W3C Working Draft vom 19. November 201display ist keine animierbare Eigenschaft . Glücklicherweise ist visibility animierbar. Sie können den Übergang mit einem Opazitätsübergang verketten ( JSFiddle ):

  • HTML:

    <a href="http://example.com" id="foo">Foo</a>
    <button id="hide-button">Hide</button>
    <button id="show-button">Show</button>
    
  • CSS:

    #foo {
        transition-property: visibility, opacity;
        transition-duration: 0s, 1s;
    }
    
    #foo.hidden {
        opacity: 0;
        visibility: hidden;
        transition-property: opacity, visibility;
        transition-duration: 1s, 0s;
        transition-delay: 0s, 1s;
    }
    
  • JavaScript zum Testen:

    var foo = document.getElementById('foo');
    
    document.getElementById('hide-button').onclick = function () {
        foo.className = 'hidden';
    };
    
    document.getElementById('show-button').onclick = function () {
        foo.className = '';
    };
    

Beachten Sie, dass der Link anklickbar bleibt, wenn Sie ihn nur transparent machen, ohne visibility: hidden festzulegen.

20
feklee

Mein guter JavaScript-Trick ist m das gesamte Szenario in zwei verschiedene Funktionen zu unterteilen!

Zur Vorbereitung wird eine globale Variable deklariert und eine Ereignisbehandlungsroutine definiert:

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

Wenn ich dann ein Element verstecke, benutze ich Folgendes:

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

Um das Element wieder aufzurufen, mache ich etwa Folgendes:

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

Es funktioniert soweit!

13
Sasa Milenkovic

Bearbeiten: In diesem Beispiel wird keine Anzeige angewendet.

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

Was oben passiert, ist, dass bis zu 99% der Animationsanzeige blockiert ist, während die Deckkraft ausgeblendet wird. Im letzten Moment wird die Anzeigeeigenschaft auf none gesetzt.

Und das Wichtigste ist, den letzten Frame nach dem Ende der Animation im Animationsfüllmodus beizubehalten: vorwärts

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

Hier sind zwei Beispiele: https://jsfiddle.net/qwnz9tqg/3/

12
Pawel

Ich bin heute darauf gestoßen, mit einem position: fixed Modal, das ich wiederverwendete. Ich konnte es nicht behalten display: none und es dann animieren, da es gerade in Erscheinung trat, und z-index (negative Werte usw.) auch seltsame Dinge taten.

Ich habe auch height: 0 bis height: 100% verwendet, aber es hat nur funktioniert, wenn das Modal angezeigt wurde. Dies ist dasselbe, als ob Sie left: -100% oder etwas anderes verwendet hätten.

Dann fiel mir auf, dass es eine einfache Antwort gab. Et voila:

Erstens Ihr versteckter Modal. Beachten Sie, dass height0 ist, und überprüfen Sie die height -Deklaration in Übergängen ... sie hat einen 500ms, der länger ist als mein opacity Übergang . Denken Sie daran, dass dies Auswirkungen auf den ausgehenden Ausblendungsübergang hat: Zurücksetzen des Modals in den Standardzustand.

#modal-overlay {
    background: #999;
    background: rgba(33,33,33,.2);
    display: block;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
       -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
            -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
         -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
        transition: height 0s 500ms, opacity 300ms ease-in-out;
}

Zweitens Ihr sichtbarer Modal. Angenommen, Sie setzen .modal-active auf body. Jetzt ist height100%, und auch mein Übergang hat sich geändert. Ich möchte, dass das height sofort geändert wird und das opacity300ms.

.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}

Das ist es, es funktioniert wie ein Zauber.

10
hotmeteor

Aus einigen dieser Antworten und einigen Vorschlägen an anderer Stelle ergibt sich Folgendes für Hover-Menüs (ich verwende dies speziell mit bootstrap 3):

nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}

Sie können auch height anstelle von max-height verwenden, wenn Sie beide Werte angeben, da height:auto mit transitions nicht zulässig ist. Der Hover-Wert von max-height muss möglicherweise größer sein als der Wert von height im Menü.

8
Edyn

Ändern Sie overflow:hidden in overflow:visible. Es funktioniert besser Ich benutze so:

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

visible ist besser, weil overflow:hidden genau wie ein display:none wirkt.

6
jesus

Nachdem die akzeptierte Antwort von Guillermo geschrieben wurde, hat die CSS-Übergangsspezifikation vom 3. April 2012 das Verhalten des Sichtbarkeitsübergangs geändert und jetzt ist es möglich, dieses Problem auf kürzere Weise zu lösen , ohne die Verwendung von Übergangsverzögerung:

.myclass > div { 
                   transition:visibility 1s, opacity 1s; 
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div 
               {   visibility:visible; opacity:1 }

Die für beide Übergänge angegebene Laufzeit sollte normalerweise identisch sein (obwohl eine etwas längere Sichtbarkeitszeit kein Problem darstellt). Eine aktuelle Version finden Sie in meinem Blog http://www.taccgl.org/blog/css-transition-visibility.html#visibility-opacity .

W.r.t. Der Titel der Frage "Übergänge auf dem Display: Eigenschaft" und als Antwort auf Kommentare von Rui Marques und Josh auf die akzeptierte Antwort: Diese Lösung funktioniert in Fällen wobei es unerheblich ist, ob die Anzeige- oder Sichtbarkeitseigenschaft verwendet wird (wie es bei dieser Frage wahrscheinlich der Fall war). Das Element wird nicht vollständig als Anzeige entfernt: Keine. Machen Sie es nur unsichtbar, aber es bleibt im Dokumentenfluss und beeinflusst die Position der folgenden Elemente. Übergänge, bei denen das Element wie bei der Anzeige vollständig entfernt wird: Es können keine Übergänge mit der Höhe (wie in anderen Antworten und Kommentaren angegeben), der maximalen Höhe oder dem oberen/unteren Rand ausgeführt werden. Siehe auch Wie kann ich die Höhe ändern: 0; zur Höhe: automatisch; mit CSS? und meinem Blog http://www.taccgl.org/blog/css_transition_display.html .

Antwort von GeorgeMillo: Beide Eigenschaften und beide Übergänge sind erforderlich: Mit der Opazitätseigenschaft wird eine Einblend- und Ausblendanimation erstellt, und mit der Sichtbarkeitseigenschaft wird vermieden, dass das Element weiterhin auf Mausereignisse reagiert. Übergänge bei der Deckkraft für den visuellen Effekt und bei der Sichtbarkeit verzögern das Ausblenden, bis das Ausblenden abgeschlossen ist.

5

Kein Javascript erforderlich und keine unverschämt große Maximalgröße erforderlich. Stellen Sie stattdessen Ihre maximale Höhe für Ihre Textelemente ein und verwenden Sie eine Schrift-relative Einheit wie rem oder em. Auf diese Weise können Sie eine maximale Höhe festlegen, die größer als Ihr Container ist, und gleichzeitig eine Verzögerung oder ein "Aufspringen" beim Schließen des Menüs vermeiden:

HTML

<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>

CSS

nav input + ul li { // notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // a little bigger to allow for text-wrapping - but not outrageous
}

Sehen Sie sich hier ein Beispiel an: http://codepen.io/mindfullsilence/pen/DtzjE

5
mindfullsilence

Ich bin mehrmals auf dieses Problem gestoßen und bin jetzt einfach mit Folgendem umgegangen:

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

Durch das Hinzufügen der Klasse block--invisible können nicht alle Elemente angeklickt werden, sondern alle dahinter stehenden Elemente werden aufgrund des pointer-events:none, der von allen gängigen Browsern unterstützt wird (nein IE <11) .

4
DominikAngerer

Ich vermute, dass jeder, der gerade erst CSS-Übergänge startet, schnell feststellt, dass sie nicht funktionieren, wenn Sie gleichzeitig die Anzeigeeigenschaft (block/none) ändern. Eine noch nicht erwähnte Problemumgehung besteht darin, dass Sie weiterhin display: block/none verwenden können, um das Element auszublenden/anzuzeigen, aber seine Deckkraft auf 0 setzen können, sodass es selbst dann noch unsichtbar ist, wenn es display: block ist. Fügen Sie dann zum Einblenden eine weitere CSS-Klasse wie "on" hinzu, mit der die Deckkraft auf 1 gesetzt und der Übergang für die Deckkraft definiert wird. Wie Sie sich vielleicht vorgestellt haben, müssen Sie JavaScript verwenden, um dem Element diese "on" -Klasse hinzuzufügen, aber Sie verwenden immer noch CSS für den eigentlichen Übergang.

P.S. Wenn Sie sich in einer Situation befinden, in der Sie beide Aktionen ausführen müssen: Blockieren und Klasse "Ein" hinzufügen, verschieben Sie letztere mit setTimeout. Andernfalls sieht der Browser nur, dass beide Dinge gleichzeitig geschehen, und deaktiviert den Übergang.

4
Larry Gerndt

Endlich habe ich eine Lösung für mich gefunden, indem ich opacity mit position absolute kombiniert habe (um nicht versteckt Platz zu belegen).

.toggle {
  opacity: 0;
  position: absolute;
  transition: opacity 0.8s;
}

.parent:hover .toggle {
  opacity: 1;
  position: static;
}
3
Damjan Pavlica

Ich denke, SalmanPK hat die naheliegendste Antwort: Es blendet ein Element mit den folgenden CSS-Animationen ein oder aus. Die Anzeigeeigenschaft animiert jedoch nicht reibungslos, sondern nur die Deckkraft.

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

Wenn Sie das Element animieren möchten, das sich vom Anzeigeblock zum Anzeigeblock bewegt, kann ich nicht erkennen, dass dies derzeit nur mit CSS möglich ist. Sie müssen die Höhe ermitteln und eine CSS-Animation verwenden, um die Höhe zu verringern. Dies ist mit CSS möglich, wie im folgenden Beispiel gezeigt, aber es wäre schwierig, die genauen Höhenwerte zu kennen, die Sie zum Animieren eines Elements benötigen.

jsFiddle beispiel

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.Push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

JavaScript

var element = document.getElementById("element");

// Push item down
element.className = element.className + " Push-down";
2
svnm

Es tut mir fast leid, auf eine Frage mit so vielen Antworten zu antworten, aber diese Lösung ist hervorragend kompatibel und ich habe sie noch nicht gesehen:

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

Erklärung: Verwendet den Trick visibility: hidden (der mit "show-and-animate" in einem Schritt kompatibel ist), verwendet jedoch die Kombination position: absolute; z-index: -1; pointer-events: none;, um sicherzustellen, dass der Container verborgen ist nimmt kein Leerzeichen ein und antwortet nicht auf Benutzerinteraktionen.

2

So einfach wie :)

@keyframes fadeout {
0% { opacity: 1; height: auto; }
90% { opacity: 0; height: auto; }
100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;

Lass es verblassen und dann mache es Höhe 0; Achten Sie auch darauf, vorwärts zu verwenden, damit es im Endzustand bleibt.

2

Anstatt die Anzeige zu verwenden, können Sie das Element "außerhalb des Bildschirms" speichern, bis Sie es benötigen. Setzen Sie dann seine Position an die gewünschte Stelle und transformieren Sie es gleichzeitig. Dies wirft jedoch eine ganze Reihe anderer Designprobleme auf, so ymmv. Sie möchten die Anzeige wahrscheinlich sowieso nicht verwenden, da Sie möchten, dass der Inhalt für Screenreader zugänglich ist, die zum größten Teil versuchen, Regeln für die Sichtbarkeit zu befolgen - dh, wenn er nicht für das Auge sichtbar sein soll. Es wird dem Agenten nicht als Inhalt angezeigt.

1
user164226

Sie können dies mit Übergangsereignissen tun. Sie erstellen also 2 CSS-Klassen für den Übergang, von denen eine die Animation und die andere den Status „Keine Anzeige“ enthält. und Sie wechseln sie, nachdem die Animation beendet ist? In meinem Fall kann ich die Divs wieder anzeigen, wenn ich ein BTN drücke und beide Klassen entferne.

Probieren Sie die unten geschnippten ...

$(document).ready(function() {
  //assign transition event
  $("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
    //we check if this is the same animation we want  
    if (event.originalEvent.animationName == "col_hide_anim") {
      //after the animation we assign this new class that basically hides the elements.    
      $(this).addClass("animation-helper-display-none");
    }

  });

  $("button").click(function(event) {

    $("table tr .hide-col").toggleClass(function() {
      //we switch the animation class in a toggle fashion...
      //and we know in that after the animation end, there is will the animation-helper-display-none extra class, that we nee to remove, when we want to show the elements again, depending on the toggle state, so we create a relation between them.
      if ($(this).is(".animation-helper-display-none")) {
        //im toggleing and there is already the above classe, then what we want it to show the elements , so we remove both classes...        
        return "visibility_switch_off animation-helper-display-none";
      } else {
        //here we just want to hide the elements, so we just add the animation class, the other will be added later be the animationend event...        
        return "visibility_switch_off";
      }

    });

  });

});
table th {
  background-color: grey;
}

table td {
  background-color: white;
  padding:5px;
}

.animation-helper-display-none {
  display: none;
}

table tr .visibility_switch_off {
  animation-fill-mode: forwards;
  animation-name: col_hide_anim;
  animation-duration: 1s;
}

@-webkit-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes col_hide_anim {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <theader>
    <tr>
      <th>Name</th>
      <th class='hide-col'>Age</th>
      <th>Country</th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>Name</td>
      <td class='hide-col'>Age</td>
      <td>Country</td>
    </tr>
  </tbody>
</table>

<button>Switch - Hide Age column with fadeout animation and display none after</button>
1
Miguel

Ich hatte ein ähnliches Problem, auf das ich keine Antwort finden konnte. Einige Google-Suchanfragen führten mich später hierher. Da ich nicht die einfache Antwort fand, auf die ich gehofft hatte, stieß ich auf eine Lösung, die sowohl elegant als auch effektiv ist.

Es stellt sich heraus, dass die CSS-Eigenschaft visibility einen Wert collapse hat, der im Allgemeinen für Tabellenelemente verwendet wird. Wenn es jedoch für andere Elemente verwendet wird, werden sie effektiv als versteckt dargestellt, so ziemlich wie display: hidden, jedoch mit der zusätzlichen Fähigkeit, dass das Element keinen Platz einnimmt und Sie dies können animieren Sie immer noch das betreffende Element.

Nachfolgend finden Sie ein einfaches Beispiel für diese Aktion.

function toggleVisibility() {
  let exampleElement = document.querySelector('span');
  if (exampleElement.classList.contains('visible')) {
    return;
  }
  exampleElement.innerHTML = 'I will not take up space!';
  exampleElement.classList.toggle('hidden');
  exampleElement.classList.toggle('visible');
  setTimeout(() => {
    exampleElement.classList.toggle('visible');
    exampleElement.classList.toggle('hidden');
  }, 3000);
}
#main {
  display: flex;
  flex-direction: column;
  width: 300px;
  text-align: center;
}

.hidden {
  visibility: collapse;
  opacity: 0;
  transition: visibility 2s, opacity 2s linear;
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.5s, opacity 0.5s linear;
}
<div id="main">
  <button onclick="toggleVisibility()">Click Me!</button>
  <span class="hidden"></span>
  <span>I will get pushed back up...</span>
</div>
1
Deadmano

Die einfachste universelle Lösung für das Problem ist: Sie können display:none in Ihrem CSS angeben, müssen es jedoch mit JavaScript in block (oder was auch immer) ändern und müssen es dann auch Fügen Sie Ihrem fraglichen Element eine Klasse hinzu, die tatsächlich den Übergang ausführt mit setTimeout (). Das ist alles.

Dh:

<style>
#el {
    display: none;
    opacity: 0;
}
#el.auto-fade-in {
    opacity: 1;
    transition: all 1s ease-out; /* future, future, please come sooner! */
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
}
</style>

<div id=el>Well, well, well</div>

<script>
var el = document.getElementById('el');
el.style.display = 'block';
setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

Getestet in den neuesten vernünftigen Browsern. Sollte natürlich nicht in IE9 oder früher funktionieren.

1
mojuba

sie können dies auch verwenden:

.dropdown {
height: 0px;
width: 0px;
opacity: .0;
color: white;
}
.dropdown:hover {
height: 20px;
width: 50px;
opacity: 1;
transition: opacity 200ms;
/* Safari */
-webkit-transition: opacity 200ms;
}
0
user2615031

Sie können dies auf natürliche Weise erreichen, wie Sie es erwartet haben - mithilfe der Anzeige -, aber Sie müssen den Browser drosseln, damit es funktioniert, entweder mit JS oder, wie andere einen ausgefallenen Trick mit einem Tag in einem anderen vorgeschlagen haben. Das innere Tag interessiert mich nicht, da es CSS und Dimensionen weiter verkompliziert. Deshalb hier die JS-Lösung:

https://jsfiddle.net/b9chris/hweyecu4/1/

Beginnen Sie mit einer Box wie:

<div class="box hidden">Lorem</div>

Eine versteckte Kiste. Sie können den Übergang beim Klicken mit:

function toggleTransition() {
  var el = $("div.box1");

  if (el.length) {
    el[0].className = "box";
    el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {    
        el[0].className = "box hidden";
    });
  } else {
    el = $("div.box");
    el[0].className = "box";
    el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {    
        el[0].className = "box box1";
    });
  }

  return el;
}

someTag.click(toggleTransition);

Das CSS ist das, was Sie vermuten würden:

.hidden {
  display: none;
}
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 20px;
    top: 20px;
    position: absolute;
    -webkit-transform-Origin: 0 50%;
    transform-Origin: 0 50%;
    -webkit-transform: scale(.2);
    transform: scale(.2);
  -webkit-transition: transform 2s;
  transition: transform 2s;
}
.box1{
    -webkit-transform: scale(1);
    transform: scale(1);
}

Der Schlüssel drosselt die Anzeigeeigenschaft. Wenn Sie die ausgeblendete Klasse entfernen und dann 50 ms warten und dann den Übergang über die hinzugefügte Klasse starten, wird sie angezeigt und anschließend wie gewünscht erweitert Es wird nur ohne Animation auf den Bildschirm geschleudert. Ähnliches passiert in umgekehrter Richtung, außer dass wir warten, bis die Animation beendet ist, bevor wir uns verstecken.

Hinweis: Ich missbrauche .animate(maxWidth) hier, um setTimeout Rennbedingungen zu vermeiden. setTimeout führt schnell versteckte Fehler ein, wenn Sie oder eine andere Person Code finden, der nichts davon weiß. .animate() kann einfach mit .stop() beendet werden. Ich benutze es nur, um eine Verzögerung von 50 ms oder 2000 ms in die Standard-FX-Warteschlange einzufügen, wo es für andere Codierer, die darauf aufbauen, einfach zu finden/aufzulösen ist.

0
Chris Moschini

Ich habe ein Open Source-Skelettprojekt namens Display-Animation umschalten

https://marcnewton.github.io/Toggle-Display-Animate/

Mit diesem Skeleton-Helfer können Sie jQuery ein-/ausblenden, jedoch mit CSS3-Übergangsanimationen.

Es werden Klassenumschaltungen verwendet, damit Sie beliebige CSS-Methoden für Elemente außer display: none | block | table | inline usw. verwenden können, sowie andere alternative Verwendungszwecke, die in Betracht gezogen werden können.

Der Hauptentwurfszweck ist das Umschalten zwischen Elementen. Es unterstützt den Status "Zurücksetzen", bei dem Sie durch Ausblenden des Objekts den Keyframe rückwärts ausführen oder eine alternative Animation zum Ausblenden des Elements abspielen können.

Das meiste Markup für das Konzept, an dem ich arbeite, ist CSS. Es wird nur sehr wenig Javascript verwendet.

Hier gibt es eine Demo: http://marcnewton.co.uk/projects/toggle-display-animate/

0
Marc Newton

Sie können einfach css Visibility: hidden/visible anstelle von Display: none/block verwenden

div {
    visibility:hidden;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
}

parent:hover > div {
    opacity: 1;
    visibility: visible;
}
0
foxdanni

Wenn Sie Ihre Klassen mit jQuery festlegen, funktioniert dies zu 100%:

$(document).ready(function() {
  $('button').click(function() {
    var container = $('.container');
    
    if (!container.hasClass('active')) {
      container.addClass('show').outerWidth();
      container.addClass('active');
    }
    else {
      container.removeClass('active').one('transitionend', function() {
        container.removeClass('show');
      });
    }
  });
});
.container {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.container.show {
  display: flex;
}
 
.container.active {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Toggle</button>

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Natürlich können Sie auch nur die Funktionen jQuery .fadeIn() und .fadeOut() verwenden, aber das Festlegen von Klassen bietet den Vorteil, dass Sie zu einem anderen Anzeigewert als block wechseln möchten (wie in der Standardeinstellung festgelegt) mit .fadeIn() und .fadeOut()).

Hier wechsle ich zu flex mit einem schönen Fade-Effekt.

0
GSTAR