Javascript 使用反应/衰减光照长度的淡出效应

如何在每张照片卡上实现淡出效果，然后在淡出效果后减少照片的长度？以下是链接：。我得到了一个解决方案，但当我按下每张照片时，解决方案不起作用。有人知道这些问题吗？

试着这样做：

在React中，修改组件的方式是根据其属性/状态。在单击图片容器时更新状态，然后使用该状态添加类

图片.js

import React，{Component}来自“React”；
导入“./css/utilities.css”；
导入“./css/main.css”；
类图片扩展组件{
建造师（道具）{
超级（道具）；
此.state={
淡出：假
};
this.fadeOut=this.fadeOut.bind（this）；
}
淡出{
this.setState（{fadeOut:true}，函数（）{
setTimeout（函数（）{
document.getElementById（“长度”）.innerText--；
}, 200);
});
}
render（）{
console.log（this.props.picture）；
const{title，thumbnailUrl}=this.props.picture；
返回(
此。淡出（事件）}
>
{title}
);
}
}
导出默认图片；

然后，该类使用CSS平滑地应用淡出效果：

main.css

。图片{
不透明度：1；
过渡：不透明度0.2s线性；
}
.picture.fadeOut{
不透明度：0；
}

其他建议：

• 上面的代码代替jsonPlaceholder.js运行，以便更好地遵循框架约定，并且只使用CSS进行样式设置
• 在HTML中，每个属性都必须是唯一的，因此如果您将有多个picture元素，则不能设置

  id=“picture”

• 每个图像都应该有一个属性

---

不客气！我希望这个答案对你有帮助。你也要小心：）