webentwicklung-frage-antwort-db.com.de

CSS Übergang vom Display none zum Displayblock und umgekehrt

Ich weiß, dass diese Frage hier in SO wahrscheinlich millionenfach gestellt wurde, aber ich habe den Großteil der Lösung ausprobiert.

Also habe ich ein Dropdown mit display, das ursprünglich auf none ausgerichtet war. Wenn ich darauf klicke, zeigt es einen schönen Übergang. (So ​​weit, ist es gut). Wenn ich jedoch erneut darauf klicke, um das Dropdown-Menü auszublenden, wird es sofort ausgeblendet, aber ich möchte das nicht. Ich möchte mich mit einem ähnlichen Übergang verstecken, der zugewiesen wurde. Hier ist mein Code für CSS:

.dropdown-menu {
  padding: 0 0;
  display: none;
  -webkit-animation: slide-down .3s ease-out;
  -moz-animation: slide-down .3s ease-out;
}

.table-dropdown-open {
  display: block;
  -webkit-animation: slide-down .3s ease-out;
  -moz-animation: slide-down .3s ease-out;
}

@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes slide-down {
  0% {
    opacity: 0;
    -moz-transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

Dies ist kein Duplikat, da ich versuche, den Übergang von block zu none zu geben. Nicht von none bis block

7
DingDong

display Ihr Element zu jeder Zeit und nur transition eine beliebige animatable-Eigenschaft. In Ihrem Fall sieht opacity wie ein guter Kandidat aus, auch wenn Sie mit transform spielen, erhalten Sie möglicherweise das gewünschte Ergebnis. Einfaches Beispiel: 

any {
  transform: scale(0);
  transition: transform .4s cubic-bezier(.5,0,.3,1);
}
any.animated {
  transform: scale(1);
}

In der Tat sollten opacity und transform die einzigen beiden Eigenschaften sein, die Sie animieren sollten, da sie DOM nicht für etwas anderes als für das animierte Element erforderlich sind, sodass die Browser-Leistung nicht beeinträchtigt wird, selbst wenn Sie eine beträchtliche Anzahl von Elementen gleichzeitig animieren .

Bitte beachten Sie, dass Ihre Elemente, selbst wenn sie nicht gezeichnet werden, tatsächlich an dem Ort sind, an dem sie sich befinden würden, wenn sie nicht transformed sind. Sie sollten ihnen also pointer-events:none geben, wenn sie sich im "unsichtbar" -Zustand befinden und pointer-events:all, wenn sie sich im "sichtbar" -Zustand befinden, sodass sie keine Zeigerereignisse wahrnehmen nicht sichtbar.


Als Beispiel habe ich Ihnen zwei Animationsbeispiele gegeben (mit und ohne Keyframes). Denken Sie daran, dass Sie prefix your code benötigen. Um vollständige Browserkompatibilität zu erhalten, verwenden Sie > 0% in den Einstellungen (das kleine Kästchen unten).

setTimeout(function(){
  var dm = document.querySelector('.dropdown-menu');
  dm.classList.remove('hide-menu');
}, 300);
/* simple animation example, on parent. No keyframes. */
.dropdown-menu.hide-menu {
  opacity: 0;
}
.dropdown-menu {
  opacity: 1;
  transition: opacity .2s cubic-bezier(.4,0,.2,1);
  position: relative;
  animation: delay-overflow .3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.dropdown-menu:hover {
  animation: none;
  cursor: pointer;
}

/* animation example with keyframes, on child */

.dropdown-menu ul {
  position: absolute;
  margin-top: 0;
  padding-top: 1rem;
  top: 100%;
  opacity: 0;
  transform: translateY(-10%);
  animation: slide-up .3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.drowdown-menu.hide-menu ul {
  animation-duration: 0s;
}
.dropdown-menu:hover ul {
  animation: slide-down .3s;
  animation-fill-mode: forwards;
}


@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10%);
  }
}
@keyframes delay-overflow {
  0% {
    overflow: visible;
  }
  99% {
    overflow: visible;
  }
  100% {
    overflow: hidden;
  }
}
<div class="dropdown-menu hide-menu">
  <span>Menu</span>
  <ul>
    <li>A menu item</li>
    <li>Another menu item</li>
    <li>...</li>
    <li>And so on...</li>
  </ul>
</div>

Hinweis: Ein sehr praktischer Trick mit der animation -Eigenschaft besteht darin, dass Sie das Anwenden von Eigenschaften, auch nicht animierbare, verzögern können, bevor Sie die gewünschte Zeit beantragen. Ich verwende diesen Trick, um die Anwendung von overflow:hidden auf das übergeordnete Element zu verzögern (und overflow ist nicht animierbar), so dass die Animation des untergeordneten Elements - die außerhalb der Grenzen des übergeordneten Elements liegt - bis zum Ende sichtbar ist. Nachdem der Vorgang abgeschlossen ist, gilt der overflow:hidden und fängt keine Mausereignisse außerhalb des Menüöffners mehr ein.

10

es ist nur eine einfache Logik. Sie haben derzeit den Stil definiert, Sie gleiten nach unten, aber Sie haben den Abbruch des Div nicht festgelegt. Sie müssen zuerst einen geschlossenen Zustand haben, von dem ich glaube, dass er in Ihrem Fall das Dropdown-Menü ist

.dropdown-menu {
    transition: all 500ms ease;
}

oder einfach verwenden 

.dropdown-menu {
    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

Wenn dies nicht funktioniert, 

0
Tsitso Makhakhe