Tutup pop timbul sebelum peralihan landskap

Question

Soalan saya sangat mudah. Saya mempunyai tetingkap timbul yang meluncur terbuka dari kanan ke kiri dan mahu ia tergelincir ditutup dari kiri ke kanan. Pada masa ini saya dapat membuka pop timbul dengan betul tetapi tidak boleh menutupnya seperti yang saya harapkan.

<div class="overlay">
    <div class="item-kandungan">
         <h1>
    </div>
</div>

.overlay {
    kelegapan: 0;
    peralihan: kelegapan 0.4s linear;
}

.overlay {
   &.-tunjukkan {
      Kelegapan: 1
   }
}

.overlay {
    .item-kandungan {
         mengubah: translateX(200%);
         peralihan: mengubah 0.4s kemudahan-keluar;
     }
}

.overlay {
    &.-tunjukkan {
       .item-kandungan {
           transform: translateX(0);
           peralihan: mengubah 0.4s kemudahan-keluar;
        }
    }
}

Saya telah cuba menetapkan ketelusan, menambah kesan peralihan, kelewatan peralihan, tetapi tiada apa yang nampaknya berjaya.

Answer 1

Anda perlu menetapkan semula lokasi, sila cuba kod berikut:

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

}