无法在 React 中重现淡入效果

Posted 2023-03-06

【中文标题】无法在 React 中重现淡入效果

【英文标题】：Can't reproduce fade-in effect in React

【发布时间】：2019-07-05 02:43:40

【问题描述】：

我想在我的 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.transitionDurationms` 
        >
            <img src=`$props.image.path` />
        </div>
    );

     export default ImageContainer;

即使正确应用了内联类并且 css 在那里，我也无法弄清楚为什么效果没有出现。

【参考方案1】：

（正如对该线程的另一个回答所说，）问题是 CSS（类）没有改变，所以过渡是“不需要的”，导致没有动画。

对于想要在动画或其他库上使用过渡的 React 人来说，这里有一个 dirty hack 的“工作”小提琴： https://jsfiddle.net/s16nd2j5/

诀窍是将类添加到componentDidMount() 中的<ImageContainer>，并使用setTimeout for 0ms。

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

这有点强制状态更新“推迟”到另一个渲染，导致“CSS 类更改”发生。

附：这是一个黑客。当像这样使用setTimeout / setInterval 时，代码有异味。

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

【参考方案2】：

问题是 is-transitioning 是从头开始添加的，所以你的元素已经在 opacity:1 并且不会发生。您需要添加类以触发不透明度更改并查看过渡。

另一种方式，以防您无法添加类是使用动画。这是您可以转换为 react 的 JS 示例：

Array.from(document.querySelectorAll('.item')).map((i, index) => 
  i.style.animationDuration = `$(index * Math.trunc(Math.random() * 1000)) + 200ms`;
);

.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。

【讨论】：

在尝试您的解决方案之前，我确实尝试将 is-transitioning css 类附加到父组件的 componentDidMount() 中，但效果不佳。我认为当元素从一开始就被添加到类时，我认为在概念上是错误的。谢谢，您的解决方案就像一个魅力。