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.
Related
I have a simple React component that displays some text with a 'typewriter' kind of effect via CSS. The problem I have is that this typewriter effect is re-displayed every time the component re-renders but I only want it applied on the first render and never again. Is there a way to achieve this? Below is an example...
import React from 'react';
import './Typewriter.css'
export function Blah() {
return <div className='typewriter'>
My typewriter text here
</div>
}
.typewriter {
font-family: monospace;
color:#0000;
background:
linear-gradient(-90deg, #39ff14 5px,#0000 0) 10px 0,
linear-gradient(#39ff14 0 0) 0 0;
background-size:calc(100*1ch) 200%;
-webkit-background-clip:padding-box,text;
background-clip:padding-box,text;
background-repeat:no-repeat;
animation:
b .7s infinite steps(1),
t calc(100*.01s) steps(100) forwards;
}
#keyframes t{
from {background-size:0 200%}
}
#keyframes b{
50% {background-position:0 -100%,0 0}
}
Stop the animation after the first time by using useRef and useEffect as in the following example
const { useRef, useEffect } = React;
const Example = () => {
const firstRender = useRef(true);
useEffect(() => {
firstRender.current = false;
}, []);
return <div className={firstRender.current ? 'typewriter' : ''}>
My typewriter text here
</div>
}
ReactDOM.render(<Example />, document.getElementById("react"));
.typewriter {
font-family: monospace;
color:#0000;
background:
linear-gradient(-90deg, #39ff14 5px,#0000 0) 10px 0,
linear-gradient(#39ff14 0 0) 0 0;
background-size:calc(100*1ch) 200%;
-webkit-background-clip:padding-box,text;
background-clip:padding-box,text;
background-repeat:no-repeat;
animation:
b .7s infinite steps(1),
t calc(100*.01s) steps(100) forwards;
}
#keyframes t{
from {background-size:0 200%}
}
#keyframes b{
50% {background-position:0 -100%,0 0}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
I have animation of icon that is rotating.
It may be finished any unexpected time.
So my question is. Is there any way using pure CSS to finish it to the end keyframe before stop rotating?
I have this code right now:
I did tried transition without any good result:
.loop {
transition: 400ms;
transform: rotate(180deg);
&:hover {
animation: rotation 400ms infinite linear;
}
}
#keyframes rotation {
from {
transform: rotate(180deg);
}
to {
transform: rotate(0deg);
}
}
I wrote this directive, that works as I expect.
import { Directive, ElementRef, Input } from '#angular/core';
#Directive({
selector: '[appRotate]'
})
export class RotateDirective {
speedQueue: Array<number>= [];
_speed = 0;
#Input('appRotate') set speed(value: number = 0) {
const steps = 5;
const step = (value - this._speed) / steps;
this.speedQueue = new Array(steps).fill(0).map((_, i) => (i+1) * step + this._speed);
}
constructor(private el: ElementRef) {
let rot = 0;
const loop = () => {
if (this.speedQueue.length) {
this._speed = this.speedQueue.shift();
}
rot += this._speed * 360;
this.el.nativeElement.style.transform = `rotate(${rot % 360}deg) scaleX(-1)`;
requestAnimationFrame(loop);
};
requestAnimationFrame(loop);
}
}
<span class="material-icons loop" [appRotate]="speed">
loop
</span>
<div>
<input type="radio" name="speed" (click)="speed=0">0
<input type="radio" name="speed" (click)="speed=0.02">2%
<input type="radio" name="speed" (click)="speed=0.08">8%
</div>
It works like that:
It is not CSS solution.
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.
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
For animation i write the code like this but this code is not working for me. Whant to know this is a css problem or my code style needs update. or how to do animation on a component
render: function() {
var len = Object.keys(Interfaces.previewContainer.state.sourceImg).length;
var imgContainer = [];
for (var i = 0; i < len; i++) {
imgContainer.push(React.createElement(PreviewImgContainer, {
key: i,
flipParentClass: this.state.flipParentClass,
i_d: 'SelectedTemplate_' + i,
dataactionstring: 'selecttemplatetype-' + this.state.dataactionstring['src' + i],
sourceImg: this.state.sourceImg['src' + i],
ref: 'PreviewImgContainer',
alter: this.state.alter
}));
}
return (
React.createElement(
ReactCSSTransitionGroup, {
className:'flipParent',
transitionEnterTimeout: 250,
transitionLeaveTimeout: 250,
transitionName: 'flipped' // 'flipParent flipped' is a class name
},
React.createElement('div', {
className: 'previewContainer',
style: {
marginLeft: this.state.marginLeft
},
ref: 'previewContainer'
}, imgContainer)
)
);
}
please let me know where i am making a mistake or where i have to update the code
.flipParent {
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s ease 0s;
width: 100%;
}
/* .flipped is for flipping (x-axis) the element */
.flipped {
transform: rotateY(180deg);
}
Maybe you have to implement these
.flipped-enter
.flipped-enter.flipped-enter-active
.flipped-leave
.flipped-leave.flipped-leave-active
The below screenshot is from the official react guide