React spring transition,实现每个元素的进入渐进式延迟
React spring transition, achieve a progressive delay in the entry of each element
react-spring转场页面显示的第一个例子是错误的,代码与显示的动画不对应。
我怎样才能达到同样的效果?我怎样才能在每个组件的输入和使用 spring 缓动之间获得延迟?
当我尝试这样做时,同时输入了所有组件。
文档中的这些示例只是草稿,旨在为您提供一些概览。遗憾的是 react-spring 只提供了更高级的动画,缺少一些基本的例子。
无论如何。元素之间最基本的延迟可以通过过渡的轨迹属性来实现。
const transitions = useTransition(items, item => item, {
from: { transform: "translate3d(0,-40px,0)", display: "inline-block" },
enter: { transform: "translate3d(0,0px,0)" },
leave: { transform: "translate3d(0,-40px,0)" },
trail: 100
});
您只能将此参数用于顺序延迟。当有多个项目从您的过渡基于的数组中添加或删除时。
https://codesandbox.io/s/new-bird-sztw9
在第一个例子中他们没有使用这个。他们应该稍微交错地添加和删除列表中的项目。我尝试重现它。这是交错添加:
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const handleClick = async () => {
if (items.length === 0) {
set([3]);
await sleep(1000);
set([2, 3]);
await sleep(1000);
set([2, 3, 4]);
await sleep(1000);
set([1, 2, 3, 4]);
} ...
https://codesandbox.io/s/shy-sky-56lrw
这更接近示例。但是当转换发生 mounts/unmounts 时会有轻微的颠簸。
希望对您有所帮助。
作为旁注。我检查了 react-spring 页面的源代码,他们在作弊。第一个示例甚至不使用过渡来实现流畅的动画。它使用插值来协调每个数字的移动。这是特殊组件的一些高级用法。
<RewindSpring>
{x => (
<>
<animated.div
style={{
opacity: x.interpolate({range: [0.75, 1.0], output: [0, 1]}),
transform: x.interpolate({range: [0.75, 1.0], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
}}
>
1
</animated.div>
<animated.div
style={{
opacity: x.interpolate({range: [0.25, 0.5], output: [0, 1]}),
transform: x.interpolate({range: [0.25, 0.5], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
}}
>
2
</animated.div>
<animated.div
style={{
opacity: x.interpolate({range: [0.0, 0.25], output: [0, 1]}),
transform: x.interpolate({range: [0.0, 0.25], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
}}
>
3
</animated.div>
<animated.div
style={{
opacity: x.interpolate({range: [0.5, 0.75], output: [0, 1]}),
transform: x.interpolate({range: [0.5, 0.75], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
}}
>
4
</animated.div>
</>
)}
</RewindSpring>
react-spring转场页面显示的第一个例子是错误的,代码与显示的动画不对应。
我怎样才能达到同样的效果?我怎样才能在每个组件的输入和使用 spring 缓动之间获得延迟?
当我尝试这样做时,同时输入了所有组件。
文档中的这些示例只是草稿,旨在为您提供一些概览。遗憾的是 react-spring 只提供了更高级的动画,缺少一些基本的例子。
无论如何。元素之间最基本的延迟可以通过过渡的轨迹属性来实现。
const transitions = useTransition(items, item => item, {
from: { transform: "translate3d(0,-40px,0)", display: "inline-block" },
enter: { transform: "translate3d(0,0px,0)" },
leave: { transform: "translate3d(0,-40px,0)" },
trail: 100
});
您只能将此参数用于顺序延迟。当有多个项目从您的过渡基于的数组中添加或删除时。
https://codesandbox.io/s/new-bird-sztw9
在第一个例子中他们没有使用这个。他们应该稍微交错地添加和删除列表中的项目。我尝试重现它。这是交错添加:
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const handleClick = async () => {
if (items.length === 0) {
set([3]);
await sleep(1000);
set([2, 3]);
await sleep(1000);
set([2, 3, 4]);
await sleep(1000);
set([1, 2, 3, 4]);
} ...
https://codesandbox.io/s/shy-sky-56lrw
这更接近示例。但是当转换发生 mounts/unmounts 时会有轻微的颠簸。
希望对您有所帮助。
作为旁注。我检查了 react-spring 页面的源代码,他们在作弊。第一个示例甚至不使用过渡来实现流畅的动画。它使用插值来协调每个数字的移动。这是特殊组件的一些高级用法。
<RewindSpring>
{x => (
<>
<animated.div
style={{
opacity: x.interpolate({range: [0.75, 1.0], output: [0, 1]}),
transform: x.interpolate({range: [0.75, 1.0], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
}}
>
1
</animated.div>
<animated.div
style={{
opacity: x.interpolate({range: [0.25, 0.5], output: [0, 1]}),
transform: x.interpolate({range: [0.25, 0.5], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
}}
>
2
</animated.div>
<animated.div
style={{
opacity: x.interpolate({range: [0.0, 0.25], output: [0, 1]}),
transform: x.interpolate({range: [0.0, 0.25], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
}}
>
3
</animated.div>
<animated.div
style={{
opacity: x.interpolate({range: [0.5, 0.75], output: [0, 1]}),
transform: x.interpolate({range: [0.5, 0.75], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
}}
>
4
</animated.div>
</>
)}
</RewindSpring>