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

        
    })```