出现图像时如何为图像添加过渡效果？

Question

在我的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>
  ));
}

Answer 1

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

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

在您的css文件中，定义这些样式。 他们根据输入/退出事件提到css类。

.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;
}