Can some one point me to a simple example using CSS transitions no other libraries in reactjs to animate image from negative to positive right/left positions on component load?
Here is what you are looking for
.example-enter {
opacity: 0.01;
position: relative;
left: -100px
}
.example-enter.example-enter-active {
opacity: 1;
position: relative;
left: 0;
transition: all 1s ease-in;
}
Component
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [0],
counter: 0
};
this.handleAdd = this.handleAdd.bind(this);
}
handleAdd(){
const counter = this.state.counter + 1,
items = this.state.items.concat([counter]);
this.setState({
counter,items
})
}
render(){
const items = this.state.items.map(item => {
return <li className='example' key={item}>{item}</li>
})
return <ul className='container'>
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>
<hr/>
<button onClick={this.handleAdd}>New One</button>
</ul>
}
}
React.render(<Container />, document.getElementById('container'));
And also link to >> React Animation & worked fiddle
Thanks
Related
I am working on a project and I am new with animation and my objective is from a group of buttons when the user click on the button become active and a line will move from button to button.
I managed to make the button active and change color and etc, the only thing i still can`t make is that line to move from button to button.
This is my Reactjs code
class AnimateButtonArea extends Component {
constructor(props){
super(props)
this.state = { active: 0 };
}
setActive = (key) => {
this.setState({ active: key });
}
render() {
return (
<div className = "AnimateButtonArea">
{data.AnimateButton.map((animateButton, key) => {
return(
<div key = {key} className = { this.state.active === key ? "AnimateButton active" : "AnimateButton"} >
<Button type = {this.state.active === key ? "SofiaProBlackSmallActive" : "SofiaProBlackSmall"} onClick = {() => { this.setActive(key) }} text = {animateButton.button} />
<div className = "animatedLine" />
</div>
)
})}
</div>
)
}
}
export default AnimateButtonArea;
And this is my Sass code
.AnimateButtonArea
display: inline-block
.AnimateButton
display: inline-block
margin-right: 147px
.AnimateButton.active .animatedLine
position: relative
height: 8px
left: 24px
background: var(--yellow)
border-radius: 40px
text-align: center
animation: grow 0.4s ease-out
#keyframes grow
0%
width: 0%
100%
width: 100%
UPDATE
Now I can move the line but now i want to increase the line and then decrease and move it
Here's the updated Reactjs part
setActive = (key) => {
this.setState({ active: key })
var difference = key - this.state.active
leftActive += 300 * difference
style = { width: `calc(${leftActive}px + 120px)`}
setTimeout(()=> this.beActive(leftActive), 1000)
}
beActive = (leftActive) => {
style = { marginLeft: `calc(${leftActive}px)`, with: `120px`}
console.log(style);
}
To move between positions, the line should be an unique object outside of the mapped array. Then you can manipulate the positioning (with margin, transform or left) based on the key/(array.length-1) with inline styles.
Set css transition: all 1s ease; to animate.
I would pass the width to state (this.state.activeWidth) and include it in the line style object. {width:this.state.activeWidth}
I have a Modal in my web app which I want to slide in when the user clicks "open" button. I am using react-transition-group to achieve this. But I am unable to get the animation working. Not sure what's wrong here?
import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import Modal from 'react-modal';
import './styles.css';
class Example extends React.Component {
state = {
isOpen: false,
};
toggleModal = () => {
this.setState(prevState => ({
isOpen: !prevState.isOpen,
}));
};
render() {
const modalStyles = {
overlay: {
backgroundColor: '#ffffff',
},
};
return (
<div>
<button onClick={this.toggleModal}>
Open Modal
</button>
<CSSTransition
in={this.state.isOpen}
timeout={300}
classNames="dialog"
>
<Modal
isOpen={this.state.isOpen}
style={modalStyles}
>
<button onClick={this.toggleModal}>
Close Modal
</button>
<div>Hello World</div>
</Modal>
</CSSTransition>
</div>
);
}
}
CSS File:
.dialog-enter {
left: -100%;
transition: left 300ms linear;
}
.dialog-enter-active {
left: 0;
}
.dialog-exit {
left: 0;
transition: left 300ms linear;
}
.dialog-exit-active {
left: -100%;
}
Here is the working code.
The problem here is that react-modal uses a react-portal as its mounting point. So it is not rendered as the children of the CSSTransition component. So you could not use the CSSTransition with it.
You can use some custom css to create transition effects. It is in the react-modal documentation.
So if you add this to your css. There will be transition.
.ReactModal__Overlay {
opacity: 0;
transform: translateX(-100px);
transition: all 500ms ease-in-out;
}
.ReactModal__Overlay--after-open {
opacity: 1;
transform: translateX(0px);
}
.ReactModal__Overlay--before-close {
opacity: 0;
transform: translateX(-100px);
}
And we have to add the closeTimeoutMS prop to the modal in order the closing animation to work.
<Modal
closeTimeoutMS={500}
isOpen={this.state.isOpen}
style={modalStyles}
>
https://codesandbox.io/s/csstransition-component-forked-7jiwn
I have a header, whose className changes depending on State. Each class has a different background image, specified in the CSS. Everything works fine, but the transitions are quite abrupt without a fade-in effect.
I wrote:
.jumbotron-img-1{
background-image: url("/images/myImg1.jpg");
transition: all 1s ease-in-out;
It works, but it's ugly. There is a zoom, and a distortion of the image before it shows up in its final form. I've watched some tutorials on Google, but nothing was simple and to the point for background-image transition in pure CSS or React.
Any help would be greatly appreciated, thanks!
background-image is not an animatable property. I feel what best serves your purpose is to render multiple headers with all the classnames available stacked over each other with position: absolute; relative to common parent and make only one of them visible using opacity property based on which classname is active in your state and use transition on opacity
Sample working code:
render() {
const {imgClassList} = this.props;
const {activeimgClass} = this.state;
return (
<div className="header-container">
{imgClassList.map(imgClass => {
return (
<div
className={`header ${imgClass} ${(imgClass === activeimgClass)? 'active' : ''}`}
/>)
})}
</div>
)
}
And css be something like:
.header-container {
position: relative;
}
.header{
position: absolute;
top: 0;
left: 0;
opacity: 0
transition: opacity 1s ease-in-out;
}
.header.active {
opacity: 1
}
.img-1 {
background:url('images/img-1')
}
.img-2 {
background: url('images/img-2')
} ... and so on
There's no good way to transition a background image using CSS because it's not an animatable property, per the CSS spec. One way to do this is to just have multiple images on top of one another, each containing a different one of the images you'd like to display, and then cycle through them by transitioning them to opacity: 0 and changing their z-index order.
I made a quick demo showing how you can achieve smooth changes by manipulating opacity and z-index. In pure Javascript, this is done by simply adjusting the styles with DOM manipulation and using setTimeout().
Of course in React you don't want to be doing DOM manipulation, so you can experiment with multiple classes with different opacity levels and transitions to accomplish this. There also seems to be a React component that enables all types of transitions: https://reactcommunity.org/react-transition-group/css-transition
Check out the Javascript solution demo to see how changing the opacity can get a crossfade effect on images:
function backgroundScheduler_1() {
setTimeout(() => {
document.querySelector(".img1").style.opacity = 0;
document.querySelector(".img2").style.opacity = 1;
document.querySelector(".img3").style.opacity = 1;
order(["-3", "-1", "-2"], () => { backgroundScheduler_2() }, 1000);
}, 3000);
}
function backgroundScheduler_2() {
setTimeout(() => {
document.querySelector(".img1").style.opacity = 1;
document.querySelector(".img2").style.opacity = 0;
document.querySelector(".img3").style.opacity = 1;
order(["-2", "-3", "-1"], () => { backgroundScheduler_3() }, 1000);
}, 3000);
}
function backgroundScheduler_3() {
setTimeout(() => {
document.querySelector(".img1").style.opacity = 1;
document.querySelector(".img2").style.opacity = 1;
document.querySelector(".img3").style.opacity = 0;
order(["-1", "-2", "-3"], () => { backgroundScheduler_1() }, 1000);
}, 3000);
}
function order(array, callback, time) {
setTimeout(() => {
document.querySelector(".img1").style.zIndex = array[0];
document.querySelector(".img2").style.zIndex = array[1];
document.querySelector(".img3").style.zIndex = array[2];
callback();
}, time);
}
backgroundScheduler_1();
.background-image {
position: absolute;
top: 0;
left: 0;
opacity: 1;
transition: 1s;
}
.img1 {
z-index: -1;
}
.img2 {
z-index: -2;
}
.img3 {
z-index: -3;
}
<div class="background-container">
<img class="background-image img1" src="https://placeimg.com/640/640/nature"></img>
<img class="background-image img2" src="https://placeimg.com/640/640/animals"></img>
<img class="background-image img3" src="https://placeimg.com/640/640/tech"></img>
<h2 style="color: white;">WOW!</h2>
</div>
I checked NPM momentarily and didn't see anything that promises this exact functionality. Hope this helps!
my React code
import React from 'react'
import ReactDOM from 'react-dom'
import { CSSTransition } from 'react-transition-group'
import './styles.css';
const Fade = ({ children, ...props }) => (
<CSSTransition
{...props}
timeout={600}
classNames="slide-filter"
>
{children}
</CSSTransition>
);
class FadeInAndOut extends React.Component {
state = {
show: false
}
render() {
return (
<div>
<button onClick={() => this.setState((prevState) => {
return { show: !prevState.show }
})}>Toggle</button>
<hr/>
<Fade in={this.state.show}>
<div className='greeting'>Hello world</div>
</Fade>
</div>
)
}
}
My CSS classes
.slide-filter-enter {
transform: translateX(50%);
opacity: 0;
transition: all 0.6s ease-in;
color:blue;
}
.slide-filter-enter-active {
transform: translateX(0);
color:red;
opacity: 1;
}
.slide-filter-exit {
transform: translateY(0);
opacity: 1;
color:red;
}
.slide-filter-exit-active {
color:blue;
transform: translateX(50%);
transition: all 0.6s ease-in;
}
Ok I can't understand why this is not working. It just resets to its original state after animating.
Also why is the "enter" or "enter-active" class not applied the first time it is rendered on the screen?
So you want the position of the "Fade" component to stay at the end position of the animation? Forgive me if this is not the behavior you are looking for but try removing the timeout={1000} prop on line 10.
I use this inline transform to iterate dynamically over slides
<div className="slides" style={{transform: `translate(${currentPosition}%, 0px)`, left: 0}}> {slider} </div>
</div>
which is working fine. However I would like to add some fadein to this element on position changing and the following css does not working
on element slides via css
opacity: 0;
animation: fadein 2s ease-in 1 forwards;
here is my fadein animation
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
What I'm missing in this case?
You can try something like this. That will give you idea how can you apply animations.
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
currentPosition: 0,
opacity: 0
}
}
componentDidMount() {
setTimeout(() => this.setState({
opacity: 1
}), 500);
}
handleClick() {
let self = this;
this.setState({
opacity: 0
}, () => setTimeout(() => self.setState({
opacity: 1
}), 2000))
}
render() {
return ( <
div >
<
div className = "slides"
style = {
{
transform: `translate(${this.state.currentPosition}%, 0px)`,
left: 0,
opacity: this.state.opacity
}
} > Some title to test animation < /div> <
button onClick = {
this.handleClick.bind(this)
} > Click < /button> <
/div>
)
}
}
React.render( < Test / > , document.getElementById('container'));
.slides {
transition: all 2s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container"></div>
Here is the fiddle.
Hope it helps.