如何为JavaScript创建幻灯片动画'；什么是HTML元素？

在我的项目中，许多元素是通过JavaScript创建的

代码笔：

您可以在下面的复制按钮中看到一些引号-只需单击一次。将出现一个自定义复制警报，提示文本“已复制！”。但是自定义警报会突然弹出并消失。有没有办法让它们从左到右滑动并消失

我知道这很容易，但是元素是从JavaScript创建的，所以对我来说很难

constresultel=document.querySelector（'.allquotes'）；
const pageSize=document.querySelector（'select[name=“page size”]”）；
const pageCurr=document.querySelector（'input[name=“page curr”]”）
const pageNoCurr=document.querySelector（“.page no curr”）；
const pageNoCount=document.querySelector（“.page no count”）
const btnPrev=document.querySelector（'.page btn prev'）；
const btnNext=document.querySelector（“.page btn next”）；
让结果=[]；
const getResultCount=（）=>results.length；
const getPageSize=（）=>+pageSize.value；
const getCurrPage=（）=>+pageCurr.value；
const getPageCount=（）=>Math.ceil（getResultCount（）/getPageSize（））；
常量页面响应=（记录、页面大小、页面）=>
（start=>records.slice（start，Math.min（records.length，start+pageSize）））
（页面大小*（第1页））；
const btnJump=document.querySelector（'.jump btn'）；
const pageValue=document.querySelector（“.value页”）；
常量main=async（）=>{
btnPrev.addEventListener（'click'，navPrev）；
btnNext.addEventListener（'click'，navNext）；
btnJump.addEventListener（'click'，navJump）；
pageSize.addEventListener（'change'，changeCount）；
结果=等待检索AllQuotes（）；
更新程序（结果）；
重画（）；
};
常数重绘=（）=>{
resultEl.innerHTML=''；
const paged=pageResponse（结果，getPageSize（），getCurrPage（））；
const contents=document.createElement（'div'）；
contents.classList.add（“allStatus”）；
const quotes=paged.map（（记录）=>`
${record.status}
CopyCopied！`）；
const quoteGroupNumer=Math.ceil（quotes.length/2）；
常量组=数组（quoteGroupNumer）.fill（“”）.map（（值，索引）=>{
const groupQuoteFirst=quotes[2*索引]；//0,2,4,6
const-groupQuoteSecond=quotes[2*索引+1]| |“”；//1,3,5,7
返回`${groupQuoteFirst}${groupQuoteSecond}`；
});
contents.innerHTML=groups.join（“”）；
结果追加（内容）；
};
const navPrev=（e）=>{
const pages=getPageCount（）；
const curr=getCurrPage（）；
const prevPage=curr>1？curr-1：curr；
pageCurr.value=上一页；
pageNoCurr.textContent=prevPage；
重画（）；
}
const navNext=（e）=>{
const pages=getPageCount（）；
const curr=getCurrPage（）；
const nextPage=curr{
const pages=getPageCount（）；
const curr=getCurrPage（）；
pageNoCurr.textContent=pageValue.value；
重画（）；
}
常量更改计数=（）=>{
updatePage（）；
重画（）；
};
常量updatePage=（）=>{
const count=getPageCount（）；
const curr=getCurrPage（）；
pageCurr.value=curr>count？1：curr；
pageNoCurr.textContent=curr>count？1：curr；
pageNoCount.textContent=计数；
};
const retrieveAllQuotes=异步函数（）{
返回[{
引语：“猫胜于狗。”
},
{
引用：“2Google是一个开源库。”
},
{
引语：“3只猫比雪貂好。”
},
{
引语：“爱的书。”
},
{
格言：“生命短暂，让它成为可能。”
},
{
引语：“6猫胜于狗”
},
{
引用：“7Google是一个开源库。”
},
{
格言：“猫比雪貂好。”
},
{
引语：“爱的书。”
},
{
格言：“生命是短暂的，让它成为可能。”
},
];
}
document.querySelector（'.allquotes'）.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
如果（e.target&&e.target.matches（'.copystatus'））{
const quote=e.target.parentNode.closest（“.latestatus”）
.childNodes[0]。textContent；
const notify=e.target.nextSibling.closest（'.status copy alert'）；
notify.classList.toggle（'hidden'）；
设置超时（（）=>{
notify.classList.add（'hidden'）；
}, 600);
const textArea=document.createElement（'textArea'）；
textArea.value=报价；
document.body.appendChild（textArea）；
textArea.select（）；
document.execCommand（'Copy'）；
textArea.remove（）；
}
},
假的
);
main（）
/*主状态*/
.隐藏{
显示：无；
}
.可分页{
显示器：flex；
弯曲方向：立柱；
边框：var（--可分页边框）；
背景：var（--可分页背景）；
}
.可分页。可分页结果{
显示器：flex；
弯曲方向：立柱；
弹性：1；
填充：0.25em；
}
.可分页。可分页状态{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
填充：0.25em；
背景：var（--可分页状态背景）；
}
.可分页。可分页操作{
显示：网格；
网格自动流：列；
网格间距：0.25em；
}
.pagable.pagable操作输入[name=“page curr”]{
宽度：3em；
}
.btn{
显示：内联块；
填充：10px 20px；
光标：指针；
背景#18b495；
颜色：#fff；
边界：无；
边界半径：30px；
}
.btn:悬停{
变换：比例（0.98）；
}
.状态副本警报{
位置：相对位置；
背景色：#18b495；
颜色：#ffffff；
填充：10px 10px；
边界半径：5px；
左：8px；
文本转换：大写；
字母间距：0.05em；
字号：500；
能见度：可见；
}
.状态复制警报：之前{
内容：“；
位置：绝对位置；
高度：10px；
宽度：10px；
背景色：#18b495；
左：-5px；
变换：旋转（45度）；
最高：39%；
}

最新英语状况
第1页，共1页
之前
下一个
5.
10
20