Update contents of a div element with animation styling

Question

I'm building a personal portfolio webpage with React and I'm trying to update the content of the div element but when the elements are updated, I want to involve styling, (like the old content to exit on the left and the new content to enter from the left) Sorry for my bad English. This is the part I'm trying to update and add styling

I've tried to use the componentDidMount method with a function that changes the heading but I don't know how to add animations/styling...

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);
};

I'm new to React so any help would be much appreciated. :)

Answer 1

I don't know if there are special methods to do this using React but I know that you can't animate the content of a DOM element using CSS. What I would recommend is to add the updated content in another DOM element next to your current div and then animate the two to make a nice transition.

You could, for example, do something like that:

 .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>