我知道给弹框css加animation属性，animation绑定一个keyframes规则，规则里设置弹框的透明度。
但是打开可以淡入了，可是如何在关闭时淡出呢？
这个逆向操作怎么处理？
参考与：https://blog.csdn.net/codeTnt/article/details/81030077
已经亲测可用，可以直接赋值粘贴用。如果有帮助请**采纳**！谢谢。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>toast</title>
</head>
<style media="screen">
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-moz-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-o-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-ms-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-webkit-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-moz-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-o-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-ms-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
#toast{
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 14px;
line-height: 1;
padding:10px;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
z-index: 9999;
}
.hide{
display: none;
}
.fadeOut{
animation: fadeOut .5s;
}
.fadeIn{
animation:fadeIn .5s;
}
</style>
<body></body>
</html>
<script>
var toast = function(params){
var el = document.createElement("div");
el.setAttribute("id","toast");
el.innerHTML = params.message;
document.body.appendChild(el);
el.classList.add("fadeIn");
setTimeout(function(){
el.classList.remove("fadeIn");
el.classList.add("fadeOut");
el.addEventListener("animationend", function(){
el.classList.add("hide");
});
},params.time);
};
//使用
toast({
message:"提交成功",
time:1500
});
/*------------------------
author:codeTnt
date:2018/7/13
-------------------------*/
</script>
反正如果想在淡出时实现淡入时的逆向动画，还是要转换该dom的类名的