Z-Index funktioniert nicht richtig durch Animation/Übergang?

-1

Ich habe eine weiße Fläche, mit einem grauen "Tab" direkt hinter dem weißen Raum hängen. Ich habe eine Animation, die das Ganze aus View bringt.Z-Index funktioniert nicht richtig durch Animation/Übergang?

Aus irgendeinem Grund wird während der Dauer der Animation (2s) der "Tab" vor dem Leerraum angezeigt, bis der Keyframe-Übergang stoppt und der Z-Index den Tab passend hinter dem Leerraum platziert.

Ich bin auf der Suche nach einer Möglichkeit, die Registerkarte hinter dem Leerraum während des Übergangs anzuzeigen (entsprechende Z-Index durch Animation).

.form{ 
 
    position: relative; 
 
    top: 70px; 
 
    width: 60%; 
 
    height: 82%; 
 
    padding: 10px 20px; 
 
    background: #f4f7f8; 
 
    margin: 10px auto; 
 
    border-radius: 8px; 
 
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 
 
} 
 
#form-Animation{ 
 
    animation: slide 2s 1; 
 
} 
 
@keyframes slide{ 
 
    0%{ 
 
    transform: translate3d(0px, 500%, 0px); 
 
    } 
 
    100%{ 
 
    transform: translate3d(0px, 0%, 0px); 
 
    } 
 
} 
 
.formHat{ 
 
    height: 30px; 
 
    position: absolute; 
 
    top: -33px; 
 
    left: 0px; 
 
    color: white; 
 
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 
 
    font-size: 110%; 
 
    background-color: #8c8c8c; 
 
    padding: 6px; 
 
    border-radius: 8px 8px 0px 0px; 
 
    z-index: -10; 
 
    display: block; 
 
}

<div class="form" id="form-Animation"> 
 
    <div class="formHat" id="formHat">This is the tab! 
 
    </div> 
 
    </div>

Quelle

2016-08-01 K Ghumaan

Dies ist nicht Standard. Ihre untergeordneten Elemente sollten immer über den übergeordneten Elementen liegen. Sie könnten die HTML-Struktur ändern und den weißen Balken zu einem separaten Element machen. Dann können Sie den Z-Index ohne Browser-Support-Probleme richtig steuern. – Randy

weil Sie aber formHat dem z-index: -10 innen Form, die es Hintergrund bewegen und geben Sie eine neue div innerhalb Formular erstellen müssen

hier ist ein ausgearbeitetes Beispiel testen und sagen me

 .form{ 
 
      width: 60%; 
 
      height: 82%; 
 
      position: relative; 
 
      margin-top: 40px; 
 
     
 
     } 
 
     .form_front{ 
 
      top: 70px; 
 
      padding: 10px 20px; 
 
      background: #f4f7f8; 
 
      margin: 10px auto; 
 
      border-radius: 8px; 
 
      font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 
 
     } 
 
     #form-Animation{ 
 
      animation: slide 2s 1; 
 
     } 
 
     @keyframes slide{ 
 
      0%{ 
 
      transform: translate3d(0px, 500%, 0px); 
 
      } 
 
      100%{ 
 
      transform: translate3d(0px, 0%, 0px); 
 
      } 
 
     } 
 
     .formHat{ 
 
      height: 30px; 
 
      position: absolute; 
 
      top: -33px; 
 
      left: 0px; 
 
      color: white; 
 
      font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 
 
      font-size: 110%; 
 
      background-color: #8c8c8c; 
 
      padding: 6px; 
 
      border-radius: 8px 8px 0px 0px; 
 
      z-index: -10; 
 
      display: block; 
 
     }

<!DOCTYPE html> 
 
    <html> 
 
    <body> 
 
    <div class="form" id="form-Animation"> 
 
    <div class="form_front"></div> 
 
     <div class="formHat" id="formHat">This is the tab!</div> 
 
     </div> 
 
    </body> 
 
    </html>

Quelle

2016-08-01 13:52:41 knizer

Z-Index funktioniert nicht richtig durch Animation/Übergang?

Antwort

Verwandte Themen