How to animate a sliding cart with react spring with a toggle button

Question

I have almost got this workign but not quite sure what I am doing wrong. It will slide in when I click the toggle button, but it wont slide out when I click it again, it will just rerun the slide in animation.

Any help would be great

I have the following state and toggle function

const [close, setClose] = useState(false)

  const toggleCart = () => {
    setClose(!close)
  }

following component

<CartItems close={close} location={location} />

import React, { useState } from "react"
import tw, { styled } from "twin.macro"
import { useTransition, animated } from "react-spring"

const CartWrapper = styled.div`
  .test {
    position: fixed;
    top: 0px;
    z-index: 5000;
    right: 0;
    height: 100vh;
    background: lightgrey;
    padding: 25px;
  }
`

export function CartItems({ location, close }) {

  const transitions = useTransition(close, null, {
    enter: { transform: "translate3d(100%,0,0)" },
    leave: { transform: "translate3d(0%,0,0)" },
  })

  return (
    <>
      <CartWrapper>
        {transitions.map(({ props }) => {
          return (
            <animated.div className="test" style={props}>
              <h2>Shopping Cart</h2>
              {cart}
              <p>Total: {formattedTotalPrice}</p>

              <form onSubmit={handleSubmitCheckout}>
                {/* include validation with required or other standard HTML validation rules */}
                <input
                  name="name"
                  placeholder="Name:"
                  type="text"
                  onChange={e => setName(e.target.value)}
                />
                <input
                  name="giftMessage"
                  placeholder="Gift Message:"
                  type="text"
                  onChange={e => setGiftMessage(e.target.value)}
                />

                <input type="submit" />
              </form>
              <button onClick={clearCart}>Remove all items</button>
            </animated.div>
          )
        })}

        {/* <button onClick={handleSubmit}>Checkout</button> */}
      </CartWrapper>
    </>
  )
}

Answer 1

In your example there is a second item during the transition, one entering, and one leaving. That's why you see always the entering animation.

If you use a boolean instead of array in the useTransition you have to insert a condition in the render method to prevent the second item. Just like the third example in the useTransition doc. https://www.react-spring.io/docs/hooks/use-transition

transitions.map(({ item, props, key }) => {
   return (
       item && <animated.div className="test" style={props} key={key}>

Now it basically works, but a slight modification in the useTransition is necessary.

  const transitions = useTransition(close, null, {
    from: { transform: "translate3d(100%,0,0)" },
    enter: { transform: "translate3d(0%,0,0)" },
    leave: { transform: "translate3d(100%,0,0)" }
  });

I have a working example here: https://codesandbox.io/s/toggle-react-spring-transition-ju2jd