[英]How can I add transition effect to images when they show up?
On my React app, I'm trying to showing up effect on images when they show up on a page. 在我的React应用程序上,我试图在图像显示在页面上时显示效果。 I did the below codes, but they show up with any effects.
我做了下面的代码,但它们显示了任何效果。 I set the styles directly on the div tag because they show up with any trigger effects such as hovering or clicking.
我直接在div标签上设置样式,因为它们会显示任何触发效果,例如悬停或单击。 Am I approaching in a wrong way?
我走错路了吗?
JSS styles JSS样式
column: {
...
"& div": {
transition: "all 0.5s ease-in-out"
}
}
JSX JSX
renderColumn(column) {
return column.map((item, i) => (
<div key={i}>
<img ... />
</div>
));
}
React Transition Group solves this very problem. React Transition Group解决了这个问题。 It is maintained by the React community.
它由React社区维护。 You can use it as follows:
您可以按以下方式使用它:
import { CSSTransitionGroup } from 'react-transition-group'
.
.
.
<CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}
>
<img/>
</CSSTransitionGroup>
And in your css file, define these styles. 在您的css文件中,定义这些样式。 They mention css classes as per enter/exit events.
他们根据输入/退出事件提到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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.