我试图制作一个具有连续淡入效果的砌体画廊,以便图片一张一张地淡入淡出。还有一个随机播放功能,可以随机化图像,并在随机播放后再次淡入。
这是演示和代码:
https://tuo1t.csb.app/
https://codesandbox.io/s/objective-swartz-tuo1t
首次访问该页面时,动画是正确的。但是,一旦我们单击“随机播放”按钮,就会发生一些奇怪的事情:有些图片在淡入图像后通常没有顺序地淡入,甚至没有淡入动画,它们只是从订购。
我实现这种动画的方式是通过添加基于图像索引的延迟过渡,并使用ref
来跟踪图像。
首先,我初始化ref
let refs = {};
for (let i = 0; i < images.length; i++) {
refs[i] = useRef(null);
}
我渲染了画廊
<Mansory gap={"1em"} minWidth={minWidth}>
{imgs.map((img, i) => {
return (
<PicContainer
index={img.index}
selected={isSelected}
key={img.index}
>
<Enlarger
src={img.url}
index={img.index}
setIsSelected={setIsSelected}
onLoad={() => {
refs[i].current.toggleOpacity(1); <--- start with zero opacity images till those are loaded
}}
ref={refs[i]}
realIndex={i}
/>
</PicContainer>
);
})}
</Mansory>
对于每个图像组件
class ZoomImg extends React.Component {
state = { zoomed: false, opacity: 0 };
toggleOpacity = o => {
console.log("here");
this.setState({ opacity: o }); <-- a setter function to change the opacity state via refs:
};
render() {
const {
realIndex,
index,
src,
enlargedSrc,
setIsSelected,
onLoad
} = this.props;
return (
<div style={{ margin: "0.25rem" }} onLoad={onLoad}>
<Image
style={{
opacity: this.state.opacity,
transition: "opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94)",
transitionDelay: `${realIndex * 0.1}s` <--- add a delay transition based on the index of the image.
}}
zoomed={this.state.zoomed}
src={src}
enlargedSrc={enlargedSrc}
onClick={() => {
this.setState({ zoomed: true });
setIsSelected(index);
}}
onRequestClose={() => {
this.setState({ zoomed: false });
setIsSelected(null);
}}
renderLoading={
<div
style={{
position: "absolute",
top: "50%",
color: "white",
left: "50%",
transform: "translateY(-50%} translateX(-50%)"
}}
>
Loading!
</div>
}
/>
</div>
);
}
}
我在setter函数中使用了
console.log("here");
,它将通过refs来更改不透明度状态。有16张图像,因此最初被称为16次。但是,当我单击“随机播放”按钮时,您会看到它被调用的次数少于16次,因为某些图片直接显示而不会褪色。我已经为这个问题苦苦挣扎了好几天,并真的希望有人能给我一些提示。
最佳答案
问题是您在shuffle方法中仅添加了一些新图像,一种方法是首先对所有引用应用0不透明度,然后等待几毫秒再次添加1不透明度,例如here。
但是,我会推荐一种更好的动画方法,我喜欢shifty及其Tweenable模块。
关于javascript - react :试图用砌体布局实现顺序淡入效果,但顺序不对,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57671489/