CODEWITHSUNDEEP
javascripthtmlcssreactjs
Derrick Tay
Derrick Tay

Reputation: 73

Why does my sliding effect not work as expected in my react application?

What i want is a normal e-commerce sliding effect when clicking on the cart symbol. In my react application, I use a state to control the display of my cart such that onClick, state will be true and cart will display without any animation.

Now i would like to add animation using transform: translateX(100%). Upon clicking my cart symbol nothing is being displayed instead. I used devtools to examine what happen and upon unchecking the transform attribute, what i wanted appear but when checking it again it displayed nothing. I am not sure whats happening, please help!

Below is the component that is controlling the state of displaying the cart component. The onClick function will switch the state of open to true.

{open ? (
   <Elements stripe={stripeTestPromise}>
      <Cart open={open} setOpen={setOpen} />
   </Elements>
 ) : null}

In my cart component, this is a snippet of the code

<div className="cart__container">
      <div className="cart__wrapper">
        <div className="cart__header">
          <h1>Your Cart</h1>
          <p className="close--icon" onClick={() => setOpen(!open)}>
            x
          </p>
        </div>

//other codes

</div>

And this is my css for the cart component top level cart__container

.cart__container{
  width: 550px;
  height: 100%;
  position: fixed;
  right: 0;
  background-color: white;
  z-index: 1;
  transform: translateX(100%);
  transition: 300ms ease 0s;
}

Thank you in advance!

Upvotes: 0

Views: 65

Answers (1)

brahms116
brahms116

Reputation: 21

translateX moves it to the right, so when its set to 100%, its off the screen to the right, setting translateX back to 0 would cause it to reappear, flushed to the right edge of the screen. You need set a toggle which switches the translateX value from 100% (hidden) to 0% (present)

Upvotes: 1

Related Questions