Close popup before landscape transition

Question

My question is very simple. I have a popup that slides open from right to left and want it to slide closed from left to right. Currently I am able to open the popup correctly but cannot close it the way I expect.

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

.overlay {
    opacity: 0;
    transition: opacity 0.4s linear;
}

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

.overlay {
    .items-content {
         transform: translateX(200%);
         transition: transform 0.4s ease-in-out;
     }
}

.overlay {
    &.-show {
       .items-content {
           transform: translateX(0);
           transition: transform 0.4s ease-in-out;
        }
    }
}

I've tried setting transparency, adding transition effects, transition delays, but nothing seems to work.

Answer 1

You need to reset the location, please try the following code:

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

}