[英]How can I achieve this sequential fade-in effect?
I came across this page https://pepecph.com/ and thought the fade in effect of the pictures were really cool. 我碰到了这个页面https://pepecph.com/,并认为图片的褪色效果真的很酷。
I tried to imitate that effect with styled-component
to pass each picture's index as a way to separate them when they are all fading in. 我试图通过
styled-component
来模仿这种效果,以传递每张图片的索引,以在它们全部消失时将它们分开。
-webkit-animation: ${props =>
`fadein ${props.index}s`}; /* Safari, Chrome and Opera > 12.1 */
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Here is the demo: https://codesandbox.io/s/focused-clarke-eduf1 这是演示: https : //codesandbox.io/s/focused-clarke-eduf1
However it is not quite doing what that page seems to be doing, no matter how I adjust the time of fade-in. 但是,无论我如何调整淡入时间,页面似乎都无法做到。 On the original page( https://pepecph.com/ ), every picture is showing up fast and delayed differently for some time.
在原始页面( https://pepecph.com/ )上,每张图片在一段时间内显示得很快且延迟不同。 And I inspect the image element of the original page, it has this line of css
并且我检查了原始页面的图像元素,它具有这一行的css
transition: top 70ms cubic-bezier(0.25,0.46,0.45,0.94),left 70ms cubic-bezier(0.25,0.46,0.45,0.94),transform 70ms cubic-bezier(0.25,0.46,0.45,0.94),height 150ms cubic-bezier(0.25,0.46,0.45,0.94) 70ms,-webkit-transform 70ms cubic-bezier(0.25,0.46,0.45,0.94)
I am not good at css so I don't know if this has something to do with that visual effect. 我不太擅长CSS,所以我不知道这是否与视觉效果有关。
I edited your code a little bit, let me explain what I've done: 我对您的代码进行了一点编辑,让我解释一下我所做的事情:
First we need to start with zero opacity images till those are loaded, we can also add a delay transition based on the index of the image. 首先,我们需要从零不透明度图像开始直到加载它们为止,我们还可以基于图像的索引添加延迟过渡。
<Image
pose={pose}
{...props}
style={{
opacity: this.state.opacity,
transition: "opacity 2s cubic-bezier(0.25,0.46,0.45,0.94)",
transitionDelay: `${props.index * 0.5}s`
}}
/>
We also need to add a setter function to change the opacity state via refs: 我们还需要添加一个setter函数来通过refs更改不透明度状态:
toggleOpacity = o => {
this.setState({ opacity: o });
};
The tricky part was to track the images refs, this is how it looks, we also removed all keyframes since those are no longer necessary: 棘手的部分是跟踪图像引用,这就是它的外观,我们也删除了所有关键帧,因为不再需要这些关键帧:
const Gallery = () => {
const [isSelected, setIsSelected] = useState(null);
const refs = {};
let images = [];
for (let i = 0; i < 10; i++) {
refs[i] = useRef(null);
let height = Math.floor(Math.random() * 400 + 400);
let width = Math.floor(Math.random() * 400 + 400);
images.push(
<PicContainer index={i} key={i} selected={isSelected}>
<ZoomImg
src={`https://source.unsplash.com/random/${height}x${width}`}
onLoad={() => {
// Calling ref function
refs[i].current.toggleOpacity(1);
}}
// Setting ref
ref={refs[i]}
index={i}
setIsSelected={setIsSelected}
/>
</PicContainer>
);
}
return (
<Mansory gap={"15em"} minWidth={600}>
{images.map(image => image)}
</Mansory>
);
};
Here's an example. 这是一个例子。 The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once.
如果您希望HTML一次全部消失,则HTML需要将div包裹在整个正文内容中。 Look for this:
寻找这个:
<div class="wrapper fade-in">
There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while. CSS可以做很多事情,我已经使用了很多年了,但我仍然不时地学习一些新知识。
All the animation commands will appear in your CSS like so: 所有的动画命令都会出现在CSS中,如下所示:
@keyframes fadeIn
to {
opacity: 1; }
Then your divs are going to have a class that calls the animation (@keyframes): 然后,您的div将具有一个调用动画的类(@keyframes):
.fade-in {
animation: fadeIn 1.0s ease forwards;
[other div properties can be included here]
}
The HTML will look like this: HTML将如下所示:
<div class="fade-in">
[content]
</div>
Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]: 最后,您需要确保包含供应商代码,以使其与所有浏览器兼容(这将添加大量代码,这就是jQuery可以成为此方面更好的选择的原因):
@keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
The vendor codes will have to be duplicated again in your div class in the CSS: 供应商代码将必须在CSS的div类中再次重复:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.