Question

我想在我的React应用程序中重现此vanilla JS example中编码的效果。

这是我的萨斯

.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，我也无法弄清楚为什么这种效果没有出现。

Answer 1

问题是is-transitioning是从一开始就添加的，因此您的元素已经在opacity:1上，并且会发生通知。您需要添加该类以触发不透明度更改并查看过渡。

另一种方法是在无法添加类的情况下使用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>

只需保留您编写的相同代码，并将transitionDuration替换为animationDuration，然后调整CSS。

Answer 2

（正如对该线程的另一个回答中所述，）问题是CSS（类）没有更改，因此过渡是“不需要的”，不会产生动画。

对于想在动画或其他库上使用过渡的React人们，这是一个带有肮脏hack 的“工作”小提琴： https://jsfiddle.net/s16nd2j5/

诀窍是使用<ImageContainer>将类添加到componentDidMount()中的setTimeout中，持续时间为 0ms 。

setTimeout( _ => this.setState({ transitioning: true }), 0);

这有点迫使状态更新“推迟”到另一个渲染器，从而导致“ CSS类更改”发生。

P.S。这是一个hack。像这样使用setTimeout / setInterval时，代码会闻起来。

P.P.S。为简单起见，省略了OP小提琴中的shuffle()部分。

无法在React中重现淡入效果

2 个答案: