如何设置带有反作用弹簧和切换按钮的滑动推车的动画

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中使用布尔值而不是数组，则必须在渲染方法中插入一个条件以防止出现第二项。就像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