Tengo un cuadro (div) que me gustaría alternar con la animación deslizable y luego deslizar hacia atrás en la animación (exactamente al revés) al presionar el botón.
No quiero ninguna animación en el procesamiento de la página inicial. Puedo deslizar con éxito el cuadro hacia la izquierda/desaparecer de la página al presionar el botón, sin embargo, la diapositiva hacia adentro no tiene ninguna transición o animación.
¿Cómo agrego esta transición cuando el elemento vuelve a estar a la vista sin agregar una clase que se activará con el procesamiento de la página inicial?
SlideBoxApp.js
class SlideBoxApp extends React.Component { constructor(props) { super(props) this.state = { slideIn: false } } toggleSlide() { const { slideIn } = this.state this.setState({slideIn: !slideIn}) } render() { const { slideIn } = this.state return ( <div> <button onClick={() => this.toggleSlide()}>slide in</button> <div className={`box ${slideIn? 'slideLeft' : ''}`}></div> </div> ) } } ReactDOM.render(<SlideBoxApp />, document.querySelector("#app"))SlideBoxApp.css
body { background: #20262E; padding: 20px; font-family: Helvetica; } button { margin-bottom: 10px; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } .box { width: 100px; height: 100px; background-color: pink; } .slideLeft { animation-duration: 500ms; animation-name: slideLeft; animation-fill-mode: forwards; } .slideRight { animation-duration: 500ms; animation-name: slideLeft; animation-fill-mode: forwards; } @keyframes slideLeft { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(-100%, 0); opacity: 0; } } @keyframes slideRight { 0% { transform: translate(0, 0); opacity: 0; } 100% { transform: translate(100%, 0); opacity: 1; } }la diapositiva hacia atrás no tiene ninguna transición o animación
Busqué una solución para animar el elemento a su estado original después de eliminar un keyframe , y no pude encontrar ninguna.
Tener un keyframe significa una animación entre los estados inicial y final , por lo que la animación de la página inicial es inevitable si desea animar tanto la entrada como la salida .
Sin embargo, puede lograr el resultado deseado con solo una transition en lugar de keyframes .
Simplemente agregue el nuevo estado en la clase .slideLeft :
.slideLeft { transform: translate(-100%, 0); opacity: 0; } Y dale al .box algunas propiedades de transition :
.box { transition-duration: .5s; transition-property: transform, opacity; }Actualicé tu JS Fiddle .