如何使用切换按钮为滑动车制作动画答案

【问题标题】：How to animate a sliding cart with react spring with a toggle button如何使用切换按钮为滑动车制作动画
【发布时间】：2021-02-24 18:31:26
【问题描述】：

我几乎完成了这项工作，但不太确定我做错了什么。当我点击切换按钮时它会滑入，但当我再次点击它时它不会滑出，它只会在动画中重新运行幻灯片。

任何帮助都会很棒

我有以下状态和切换功能

const [close, setClose] = useState(false)

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

跟随组件

<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>
    </>
  )
}

【问题讨论】：

标签： javascript reactjs animation react-spring

【解决方案1】：

在您的示例中，在过渡期间有第二个项目，一个进入，一个离开。这就是为什么你总是看到进入动画的原因。

如果你在 useTransition 中使用布尔值而不是数组，你必须在 render 方法中插入一个条件来阻止第二个项目。就像 useTransition 文档中的第三个示例一样。 https://www.react-spring.io/docs/hooks/use-transition

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

现在基本可以用了，只是需要对useTransition稍作修改。

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

我在这里有一个工作示例：https://codesandbox.io/s/toggle-react-spring-transition-ju2jd

【讨论】：