Popup vor Landschaftsübergang schließen

Question

Meine Frage ist sehr einfach. Ich habe ein Popup, das sich von rechts nach links öffnet und möchte, dass es von links nach rechts geschlossen wird. Derzeit kann ich das Popup korrekt öffnen, kann es jedoch nicht wie erwartet schließen.

<div class="overlay">
    <div class="items-content">
         <h1> Hallo </h1>
    </div>
</div>

.overlay {
    Deckkraft: 0;
    Übergang: Deckkraft 0,4 s linear;
}

.overlay {
   &.-show {
      Deckkraft: 1
   }
}

.overlay {
    .items-content {
         transform: TranslateX(200%);
         Übergang: Transformation 0,4 s Ease-in-out;
     }
}

.overlay {
    &.-show {
       .items-content {
           transform: TranslateX(0);
           Übergang: Transformation 0,4 s Ease-in-out;
        }
    }
}

Ich habe versucht, Transparenz einzustellen, Übergangseffekte und Übergangsverzögerungen hinzuzufügen, aber nichts scheint zu funktionieren.

Answer 1

你需要重置位置，请尝试以下代码：

.overlay {
&.-show {
   .items-content {
       transform: translateX(0); //  这里应该是0
       transition: transform 0.4s ease-in-out;
    }
}

}