如何使用切换按钮对滑动车进行动画处理 spring

Question

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

任何帮助都会很棒

我有以下状态和切换功能

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

Answer 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

如何使用切换按钮对滑动车进行动画处理 spring

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

javascript

animation

reactjs

react-spring