is it possible to simplify (JS)?

When I click on the list icon it changes to the arrow icon and vice versa, the code was extended because the change from one icon to another has an animation, thks

const f1 = document.querySelector('.f_img1');

const f2 = document.querySelector('.f_img2');
const f_button = document.querySelector('.footer button');

f_button.addEventListener('click', e => {

    if(f1.classList.contains('listAnimation') || f1.classList.contains('listAnimation_reverse')) {
        if(f1.classList.contains('listAnimation')) {
            f1.classList.replace('listAnimation', 'listAnimation_reverse');
            f2.classList.remove('arrowAnimation_reverse'); f2.classList.add('arrowAnimation');
        } else {
            if(f1.classList.contains('listAnimation_reverse')) {
                f1.classList.replace('listAnimation_reverse', 'listAnimation');
                f2.classList.remove('arrowAnimation'); f2.classLists.add('arrowAnimation_reverse');
            }
        }
    } else {
        if(f2.classList.contains('arrowAnimation') || f2.classList.contains('arrowAnimation_reverse')) {
            if(f2.classList.contains('arrowAnimation')) {
                f2.classList.replace('arrowAnimation', 'arrowAnimation_reverse');
                f1.classList.remove('listAnimation_reverse'); f1.classList.add('listAnimation');
            } else {
                f2.classList.replace('arrowAnimation_reverse', 'arrowAnimation');
                f1.classList.remove('listAnimation'); f2.classLists.add('listAnimation_reverse');
            }
        } else {
            f1.classList.add('listAnimation_reverse');
            f2.classList.add('arrowAnimation');
        }
    }

    
})

>Solution :

Yes, it is possible to simplify. Just use the toggle method.

f_button.addEventListener('click', e => {
    if (f1.classList.contains('listAnimation') || f1.classList.contains('listAnimation_reverse') {
        f1.classList.toggle('listAnimation');
        f1.classList.toggle('listAnimation_reverse');
    } else {
        f1.classList.add('listAnimation_reverse');
    }

    if (f2.classList.contains('arrowAnimation') || f2.classList.contains('arrowAnimation_reverse') {
        f2.classList.toggle('arrowAnimation');
        f2.classList.toggle('arrowAnimation_reverse');
    } else {
        f2.classList.add('arrowAnimation');
    }
});

If you add arrowAnimation to f2, and listAnimation_reverse to f1 in the HTML, you wouldn’t need the else parts, thus making it simpler.