Estoy tratando de construir un componente React para manejar la aparición y desaparición gradual. En el siguiente código, si paso out componente como accesorio, se muestra como oculto antes de animarlo. Estoy tratando de que se desvanezca de forma predeterminada, luego se desvanece cuando paso el accesorio de out . ¿Alguien ve una solución a este problema?
import React from 'react'; import styled, { keyframes } from 'styled-components'; const fadeIn = keyframes` from { transform: scale(.25); opacity: 0; } to { transform: scale(1); opacity: 1; } `; const fadeOut = keyframes` from { transform: scale(1); opacity: 0; } to { transform: scale(.25); opacity: 1; } `; const Fade = styled.div` ${props => props.out ? `display: none;` : `display: inline-block;` } animation: ${props => props.out ? fadeOut : fadeIn} 1s linear infinite; `; function App() { return ( <div> <Fade><💅test></Fade> </div> ); } export default App;El problema con su código es que está configurando la propiedad de visualización en none cuando props.out es verdadero. Es por eso que no está viendo ninguna animación, porque antes de que eso pueda comenzar, ¡ya ha ocultado el componente!
La forma de hacer una animación de desvanecimiento es usar la propiedad de visibilidad en su lugar y hacer la transición durante la misma cantidad de tiempo que toma la animación. (ver esta antigua respuesta SO )
Algo como esto debería resolver sus problemas:
const Fade = styled.default.div` display: inline-block; visibility: ${props => props.out ? 'hidden' : 'visible'}; animation: ${props => props.out ? fadeOut : fadeIn} 1s linear; transition: visibility 1s linear; `; const fadeIn = styled.keyframes` from { transform: scale(.25); opacity: 0; } to { transform: scale(1); opacity: 1; } `; const fadeOut = styled.keyframes` from { transform: scale(1); opacity: 1; } to { transform: scale(.25); opacity: 0; } `; const Fade = styled.default.div` display: inline-block; visibility: ${props => props.out ? 'hidden' : 'visible'}; animation: ${props => props.out ? fadeOut : fadeIn} 1s linear; transition: visibility 1s linear; `; class App extends React.Component { constructor() { super() this.state = { visible: true, } } componentDidMount() { setTimeout(() => { this.setState({ visible: false, }) }, 1000) } render() { return ( <div> <Fade out={!this.state.visible}><💅test></Fade> </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script> <div id="root" />Nota: Su animación fadeOut también pasó de 0 a 1 de opacidad, en lugar de al revés. También lo arreglé en el fragmento.