Javascript 当图像显示时，如何向其添加过渡效果？

在我的React应用程序中，当图像出现在页面上时，我试图在图像上显示效果。我做了下面的代码，但它们显示了任何效果。我直接在div标记上设置样式，因为它们会显示任何触发效果，例如悬停或单击。我是不是走错路了

JSS风格

column: {
  ...
  "& div": {
    transition: "all 0.5s ease-in-out"
  }
}

JSX

renderColumn(column) {
  return column.map((item, i) => (
    <div key={i}>
      <img ... />
    </div>
  ));
}

renderColumn（列）{
返回列.map（（项目，i）=>(
));
}

解决了这个问题。它由React社区维护。 您可以按如下方式使用它：

import { CSSTransitionGroup } from 'react-transition-group'
.
.
.
<CSSTransitionGroup
    transitionName="example"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={300}
>
    <img/>
</CSSTransitionGroup>

---

转换

规则仅适用于更改现有元素的CSS属性，如不透明度。因此，您必须首先在

opacity:0

处渲染图像，然后将其设置为

opacity:1

（例如使用

setTimeout

）实时示例：

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}