使用原生JS添加进场和退场动画详解

使用原生JS添加进场和退场动画可以通过给元素添加CSS类名来实现。下面是详细的步骤：

1. 创建CSS动画

首先，需要先在CSS中定义好对应的进场或退场动画，例如：

.animate-in {
    opacity: 0;
    transform: translate(0, 50px);
    animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animate-out {
    opacity: 1;
    transform: translate(0, 0);
    animation-name: fadeOut;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(0, 50px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }
    to {
        opacity: 0;
        transform: translate(0, 50px);
    }
}

其中，.animate-in类是元素进场时应用的动画，.animate-out类是元素退场时应用的动画。这里定义了两个动画：fadeIn和fadeOut，分别控制元素的透明度和位置变化。

1. 添加CSS类名

接下来，在JS中使用classList属性，为元素添加或移除对应的CSS类名，从而控制元素的进场或退场动画。

例如，要实现元素在单击时进场，可以这样写：

var box = document.getElementById('box');

box.addEventListener('click', function() {
    box.classList.add('animate-in');
});

当元素被单击时，会为其添加.animate-in类，这样就可以触发进场动画了。

如果要实现元素在页面加载时进场，可以在JS中使用window.onload事件和setTimeout函数，给元素添加.animate-in类。例如：

window.onload = function() {
    var box = document.getElementById('box');
    setTimeout(function() {
        box.classList.add('animate-in');
    }, 100);
};

这里给元素添加.animate-in类的时机是在页面加载后100ms，这样就可以让进场动画有些延迟效果了。

1. 移除CSS类名

当需要让元素退场时，只需使用classList属性移除对应的CSS类名即可。例如：

box.classList.remove('animate-in');
box.classList.add('animate-out');

这里先移除.animate-in类，再添加.animate-out类，这样就可以触发退场动画了。

示例1：

<div id="box">Click me!</div>

#box {
    background-color: #ccc;
    color: #fff;
    text-align: center;
    padding: 50px;
    cursor: pointer;
}

var box = document.getElementById('box');

box.addEventListener('click', function() {
    box.classList.add('animate-in');
});

点击div时，会触发.animate-in类，元素就会有进场效果。

示例2：

<div id="box" class="animate-in">Hello world!</div>

#box {
    background-color: #ccc;
    color: #fff;
    text-align: center;
    padding: 50px;
}

.animate-in {
    opacity: 0;
    transform: translate(0, 50px);
    animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animate-out {
    opacity: 1;
    transform: translate(0, 0);
    animation-name: fadeOut;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(0, 50px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }
    to {
        opacity: 0;
        transform: translate(0, 50px);
    }
}

var box = document.getElementById('box');

setTimeout(function() {
    box.classList.remove('animate-in');
    box.classList.add('animate-out');
}, 2000);

页面加载后2秒钟，元素会触发.animate-out类，元素就会有退场效果。