[英]Can't reproduce fade-in effect in React
我想在我的React应用程序中重现我在这个vanilla JS示例中编码的效果。
这是我的萨斯
.item
opacity: 0
transition-property: opacity
transition-timing-function: ease-in
.is-transitioning
opacity: 1
生成图像及其容器的循环:
this.props.images.map((image, index) => <ImageContainer key={`img-${index}`}
image={image}
transitionDuration={Math.trunc(index * Math.random() * 1000) + 200} />
)
最后是ImageContainer组件:
const ImageContainer = (props) => (
<div className="item is-transitioning"
style={{ transitionDuration: `${props.transitionDuration}ms` }}
>
<img src={`${props.image.path}`} />
</div>
);
export default ImageContainer;
即使内联类正确应用并且css在那里,我也无法弄清楚为什么效果不会出现。
问题是is-transitioning
是从头开始添加的,所以你的元素已经处于opacity:1
并且会发生notihng。 您需要添加该类才能触发不透明度更改并查看转换。
另一种方法,如果你不能添加类是使用animaton。 这是您可以转换为反应的JS示例:
Array.from(document.querySelectorAll('.item')).map((i, index) => { i.style.animationDuration = `${(index * Math.trunc(Math.random() * 1000)) + 200}ms`; });
.container { display: flex; } .item { display: flex; justify-content:center; align-items: center; width: 1rem; height: 1rem; background-color: teal; padding: 2rem; margin-right: 1.2rem; border-radius: 10px; font-size: 2rem; color: white; opacity: 0; animation:change 2s forwards; } @keyframes change{ to { opacity:1; } }
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
只需保留您编写的相同代码,并使用animationDuration
替换transitionDuration
并调整CSS。
(正如在这个帖子的另一个答案中所说的那样)问题是CSS(类)没有改变,所以转换是“不需要的”,导致没有动画。
对于想要在动画或其他图书馆中使用转换的React人来说,这里是一个“工作”小提琴,有一个肮脏的黑客 : https : //jsfiddle.net/s16nd2j5/
诀窍是将类添加到componentDidMount()
<ImageContainer>
,其中setTimeout
为0ms 。
setTimeout( _ => this.setState({ transitioning: true }), 0);
这种情况迫使状态更新被“推迟”到另一个渲染,导致“CSS类更改”发生。
PS它是一个黑客。 当像这样使用setTimeout / setInterval
时,代码会闻起来。
PPS为简单起见,省略了OP小提琴的shuffle()
部分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.