score:2
try setting the transition-delay
value for .example-enter.example-enter-active
css class and ease-in-out
as transition-timing-function
:
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in-out 500ms;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 500ms ease-in-out;
}
looks smoother this way. forked jsfiddle
score:1
not sure exactly what's happening in your fiddle and why it looks like the next image isn't easing in.
i did however rewrote your example in the latest react and using generators and all seems to be working ok.
you were missing the example-appear classes but i think there's more to it. you can look at my sandbox here: https://codesandbox.io/s/zw0xv4vy3x
if , based on this working example, you are able to find out what's wrong with yours then great ! if not, just copy & paste and you should be good.
js
import react, { component } from "react";
import reactcsstransitiongroup from "react-addons-css-transition-group";
import { render } from "react-dom";
import "./main.css";
function* continuosarrayiterator(arr) {
let idx = 0;
while (idx < arr.length) {
let ret = arr[idx];
idx++;
if (idx === arr.length) {
idx = 0;
}
yield ret;
}
}
class app extends component {
constructor() {
super();
this.clickhandler = this.clickhandler.bind(this);
this.items = [
{
id: 1,
text: "item1",
img: "https://mirrors.creativecommons.org/presskit/icons/cc.large.png"
},
{
id: 2,
text: "item2",
img: "https://mirrors.creativecommons.org/presskit/icons/by.large.png"
},
{
id: 3,
text: "item3",
img: "https://mirrors.creativecommons.org/presskit/icons/nc.large.png"
},
{
id: 4,
text: "item4",
img:
"https://mirrors.creativecommons.org/presskit/icons/nc-eu.large.png"
}
];
this.imageiterator = continuosarrayiterator(this.items);
this.state = {
image: this.imageiterator.next().value
};
}
clickhandler(event) {
return this.setstate({
image: this.imageiterator.next().value
});
}
render() {
return (
<div>
<button onclick={this.clickhandler}>next image</button>
<reactcsstransitiongroup
transitionappear={true}
transitionleavetimeout={500}
transitionentertimeout={500}
classname="container"
transitionname="example"
>
<div
key={this.state.image.id}
style={{
position: "absolute",
backgroundimage: `url(${this.state.image.img}`,
backgroundsize: "auto 100px",
height: "100px",
width: "100px"
}}
/>
</reactcsstransitiongroup>
</div>
);
}
}
render(<app />, document.getelementbyid("root"));
css
.container {
position: absolute;
}
.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 500ms ease-in;
}
.example-appear {
opacity: 0.01;
}
.example-appear.example-appear-active {
opacity: 1;
transition: opacity 0.5s ease-in;
}
Source: stackoverflow.com
Related Query
- ReactCSSTransition animation isn't smooth for image
- How to create a simple spinning animation for an image in React
- How can I make animation of image in a single axis ie., for a particular rotation - on horizontal or vertical axis
- React Native - Why we use the tintColor property for Image component?
- Why do I have to use "require" instead of "import from" for an image in React?
- event.target.value is undefined for buttons that wrap an image instead of text
- click an image for outside url react.js
- react-router not waiting for animation before changing route
- How can I add a fade-in animation for Nextjs/Image when it loads?
- why is Image size reset for me when i add a < a > tag
- React animation for moving an element from one parent to another
- How do I enable smooth animation during dynamic addition of components in react native?
- Image not showing on device for React Native movies tutorial on existing application
- using device camera for capturing image in reactjs
- Rechart animation for linechart bringing in lines from right side
- How to make shaking image animation in React Native?
- Animation for react-select menu open/close
- Preloading animation for React webpack bundle
- react, css) transition css for fade in and out, when background image is changed with className
- How to create a smooth background image transition in React?
- How to import svg files and use them for src in image
- How to fix image flickering by rerendering once and for all?
- React CSSTransition For a single image with a changing [src] value?
- Not able to upload Image with ImageField in EDIT mode for react-admin
- Issue in showing File Upload for image in Draft JS
- material-ui: AppBar: strategy for restricting an image height to AppBar height?
- With Semantic UI React, how to set the width and height for Image Avatar?
- gatsby & graphql : filtering for a specific single image
- React importing image does not work for CSS
- How to apply CSS animation for React Array.map() iterations?
More Query from same tag
- React hooks duplicate react package
- Webpack/babel not compiling ReactDOM.render
- what happens after dispatch function and reducer function in react-redux?
- I am getting the error "Cannot use import statement outside a module" when I run my React Razzle app
- Render attribute or null
- React update issue
- Formik - setting dynamic values for select box
- Cant send a value to another page in react
- Style property causing 'Each child in a list should have a unique "key" prop.'
- Cannot find module 'react' in IE only
- Meteor ionic 5 react
- react-scss : display problem of an <h1> with blur and transform, on "EDGE" only
- react | material ui | AutoComplete | how to assign id as a value in onNewRequest
- i want fetch nyt api
- Arrow Function doesn't trigger
- React native build error: Attempt to invoke virtual method'boolean com.facebook.react.uimanager.FabricViewStateManager.hasStateWrappper()
- React-TypeScript ConextAPI error while creating context
- How to set React's PUBLIC_URL during runtime
- On page reload, my Gatsby.js footer component renders twice
- Default scroll position of HTML select and option tag
- Form validation using regex is not working TextField MUI React
- Parsing Error in a project using react-player that is build on GatsbyJs
- StencilJS emit event to React
- Create Google Maps Circle and set its radius in React
- How to remove the outline for the cell in table when you click the cell?
- Updating a state, without setting it as a dependency in useEffect? exhaustive-deps lint rule
- How to add unit test for window keydown event in ReactJS with enzyme
- React Native - Redux : Multiple instances of same state in app
- HTML in React and ES6 Template Literal
- ReactJS - Return a component from innerHtml function