Estoy creando una página web de cartera personal con React y estoy tratando de actualizar el contenido del elemento div, pero cuando los elementos se actualizan, quiero involucrar el estilo (como el contenido antiguo para salir a la izquierda y el contenido nuevo para entrar por la izquierda) Perdón por mi mal inglés. Esta es la parte que estoy tratando de actualizar y agregar estilo.
Intenté usar el método componentDidMount con una función que cambia el encabezado, pero no sé cómo agregar animaciones/estilo...
export default class Home extends Component { skills_section_update = () => { let heading = document.getElementById('heading'); const headings = [ { head: 'Web Development' }, { head: 'Game Development' } ]; const update_head = (index) => { heading.innerText = headings[index].head; }; update_head(1); } componentDidMount = () => { setInterval(this.skills_section_update, 2000); };Soy nuevo en React, por lo que cualquier ayuda sería muy apreciada. :)
No sé si hay métodos especiales para hacer esto usando React, pero sé que no puedes animar el contenido de un elemento DOM usando CSS. Lo que recomendaría es agregar el contenido actualizado en otro elemento DOM al lado de su div actual y luego animar los dos para hacer una buena transición.
Podrías, por ejemplo, hacer algo así:
.container { width: 400px; height: 400px; border: #000 solid 1px; position: relative; overflow: hidden; } .content { width: 100%; height: 100%; transition: all .25s ease-in-out; } .container:hover .content { transform: translateY(-100%); transition: all .25s ease-in-out; } .original { background-color: wheat; } .next { background-color: teal; } <div class="container"> <div class="content original"> Content 1 </div> <div class="content next"> New content </div> </div>