react-spring
是一个流行的 React 动画库,它提供了多种动画效果和工具,使得在 React 应用中实现复杂的动画变得简单。useTransition
是 react-spring
中的一个 Hook,用于创建平滑的过渡动画。
useTransition
允许你在状态改变时应用动画效果。它可以用于控制组件的进入和离开动画,非常适合实现列表项的添加、删除或其他动态内容的变化。
react-spring
的 API 设计简洁,易于上手。useTransition
主要有两种类型:
以下是一个使用 react-spring
的 useTransition
实现从左到右滑动动画的示例:
import React, { useState } from 'react';
import { useTransition, animated } from 'react-spring';
const App = () => {
const [items, setItems] = useState(['Item 1', 'Item 2']);
const [isPending, startTransition] = useTransition({ timeoutMs: 300 });
const addItem = () => {
startTransition(() => {
setItems([...items, `Item ${items.length + 1}`]);
});
};
const removeItem = (index) => {
startTransition(() => {
const newItems = [...items];
newItems.splice(index, 1);
setItems(newItems);
});
};
return (
<div>
<button onClick={addItem}>Add Item</button>
{isPending ? (
<div>Loading...</div>
) : (
items.map((item, index) => (
<animated.div
key={item}
style={{
opacity: 1,
transform: `translateX(${index * 100}px)`,
width: '100px',
height: '100px',
backgroundColor: 'lightblue',
margin: '10px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
{item}
<button onClick={() => removeItem(index)}>Remove</button>
</animated.div>
))
)}
</div>
);
};
export default App;
react-spring
版本是最新的,或者与你的 React 版本兼容。useTransition
的配置正确,特别是 timeoutMs
参数。React.memo
或 useMemo
缓存组件。transform
属性:通过调整 transform
属性的值来控制动画的方向,例如 translateX
或 translateY
。useSpring
实现更复杂的动画效果。通过以上示例和解释,你应该能够理解如何使用 react-spring
的 useTransition
实现从左到右或反之亦然的动画效果。
领取专属 10元无门槛券
手把手带您无忧上云