Animer réagir composant avec transformation et de transition

Question

J'utilise cette ligne pour itérer transformer dynamiquement sur diapositives

<div className="slides" style={{transform: `translate(${currentPosition}%, 0px)`, left: 0}}> {slider} </div> 
</div> 

qui fonctionne très bien. Cependant, je voudrais ajouter un peu fadein à cet élément un changement de position et le css suivant ne travaille pas

sur des lames d'éléments via css

opacity: 0; 
animation: fadein 2s ease-in 1 forwards; 

Voici mon animation FADEIN

@keyframes fadein { 
    from { 
    opacity:0; 
    } 
    to { 
    opacity:1; 
    } 
} 

Qu'est-ce qui me manque dans ce cas?

Answer 1

Vous pouvez essayer quelque chose comme ça. Cela vous donnera une idée de comment pouvez-vous appliquer des 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.