javascript - 点击触发两个不同的动画？

Question

我试图通过使用javascript添加和删除具有两个不同css动画的两个不同css类来触发两个不同的动画。但是，div 不会保留以前的动画状态，由于我设计 UI 的方式，我需要它来这样做。我在 animations 属性中使用了 forwards，但是 div 在单击时执行动画，然后返回到先前的状态，然后执行另一个动画。

const projects = document.getElementById('projects')

projects.addEventListener('click', () => {
    if(projects.classList.contains('projects-animation') == true){
        projects.classList.remove('projects-animation')
        projects.classList.add('projects-animation2')
    }
    else{
        console.log('animation2')
        console.log(projects.classList)
        projects.classList.remove('projects-animation2')
        projects.classList.add('projects-animation')
    }
})

.projects-container{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    grid-area: projects;
    padding: 20px;
    font-size: 100px;
    background-color: hsl(4, 7%, 45%);
    cursor: pointer;
}

.projects{
    position: relative;
    height: fit-content;
}

.projects-animation{
    animation: projects 1s ease-in-out backwards;
}

.projects-animation2{
    animation: projects2 1s ease-in-out backwards;
}

@keyframes projects {
    100%{
        transform: translate(50%,-250%);
    }
}

@keyframes projects2 {
    100%{
        transform: translate(-50%, 250%);
    }
}

<div class="projects-container">
     <div id = "projects" class="projects">Projects</div>
</div>

标签： javascriptcssanimation

Answer 1

请检查这个，

1：您需要添加0%作为第二个动画的起点，2：我使用较小的值作为较大的值，将子 div 移出视口，如果要保留这些值，则使父 div 大或定位它相应地

    const projects = document.getElementById('projects')

    projects.addEventListener('click', () => {
        if(projects.classList.contains('projects-animation') == true){
            projects.classList.remove('projects-animation')
            projects.classList.add('projects-animation2')
        }
        else{
            console.log('animation2')
            console.log(projects.classList)
            projects.classList.remove('projects-animation2')
            projects.classList.add('projects-animation')
        }
    })

    .projects-container{
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        grid-area: projects;
        padding: 20px;
        font-size: 100px;
        background-color: hsl(4, 7%, 45%);
        cursor: pointer;
    }

    .projects{
        position: relative;
        height: fit-content;
    }

    .projects-animation{
        animation: projects 1s ease-in-out forwards;
    }

    .projects-animation2{
        animation: projects2 1s ease-in-out forwards;
    }

    @keyframes projects {
        100%{
            transform: translate(10%,-10%);
        }
    }

    @keyframes projects2 {
        0%{
            transform: translate(10%,-10%);
        }
        100%{
            transform: translate(0%, 0%);
        }
    }

    <div class="projects-container">
         <div id = "projects" class="projects">Projects</div>
    </div>