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

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

1 个答案: