CODEWITHSUNDEEP
javascriptcssreactjs
Jay P.
Jay P.

Reputation: 2590

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. 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. Am I approaching in a wrong way?

JSS styles

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

JSX

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

Upvotes: 2

Views: 180

Answers (1)

Mohit Karekar
Mohit Karekar

Reputation: 116

React Transition Group solves this very problem. It is maintained by the React community. 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. They mention css classes as per enter/exit events.

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

Upvotes: 4

Related Questions