如何使Javascript中不同句子的文本淡入淡出？

我正在研究Javascript。我想要一些10秒后应该淡出并转到下一个的句子。我不想在jQuery中使用它，所以请尝试在JS中使用它

这是我的密码：

HTML:

隐藏1

隐藏2

隐藏3

隐藏4

隐藏5

隐藏6

我想要的例子如下：

---

有什么帮助吗？

此示例显示每个

p

一次隐藏一个：

var inputs=document.querySelectorAll（'p'）；
forEach（函数（el，索引，数组）{
setTimeout（（函数（索引）{
返回函数（）{
el.classList.add（“隐藏”）；
};
}(指数),(1000*指数),；
})

。隐藏
{
可见性：隐藏；
不透明度：0；
过渡：可见性0s 2s，不透明度2s线性；
}

隐藏1

隐藏2

隐藏3

隐藏4

隐藏5

---

隐藏6

您的示例使用0.1s淡入和10s淡出

const ps=document.queryselectoral（“p”）；
功能循环（）{
ps.forEach（（p，i）=>{
常数s=p.style；
设置超时（（）=>{
ps.forEach（p=>{
p、 style.display=“”；
p、 style.opacity=“0”；
});
s、 display=“block”；
s、 transition=“不透明度.1s”；
s、 不透明度=“1”；
设置超时（（）=>{
s、 transition=“不透明度10s”；
s、 不透明度=“0”；
}, 100);
}，i*10100）；
});
设置超时（周期，ps.length*10100）；
}
循环（）
p{
显示：无；
}
隐藏1

隐藏2

隐藏3

隐藏4

隐藏5

隐藏6有很多方法可以做到这一点。一种方法是使用设置为元素数的延迟，然后在0和1之间循环不透明度

这里有一个硬编码，其中关键帧的百分比和CSS预处理器或每个代码的单独ID > P> < /Cord>元素可以用来避免JS，所以将其视为概念证明。由于
display
无法设置动画，因此我使用
position:absolute
来重叠元素。我还冒昧地加快了动画的速度，但它应该很容易调整，以满足您的需要


const elems=[…document.querySelectorAll（“p”）]；
forEach元素（（e，i）=>{
e、 style.animationDuration=`${elems.length*2000}ms`；
e、 style.animationDelay=`${i*2000}ms`；
});
@关键帧淡入淡出{
0% {
不透明度：0；
}
3% {
不透明度：1；
}
20% {
不透明度：0；
}
}
p{
位置：绝对位置；
排名：0；
不透明度：0；
动画名称：淡入淡出；
动画迭代次数：无限；
}
隐藏1

隐藏2

隐藏3

隐藏4

隐藏5

隐藏6
首先，定义CSS动画

然后，通过JavaScript或CSS中的硬代码设置动画延迟


document.queryselectoral（“p”）.forEach（（p，i）=>
p、 style.animation=`fade 10.1s${i*10.1}s`
);
@关键帧淡入淡出{
0% {
字号：0；
不透明度：0；
}
0.16% {
字号：首字母；
}
1% {
不透明度：1；
}
100% {
字号：首字母；
不透明度：0；
}
}
p{
字号：0；
}
隐藏1

隐藏2

隐藏3

隐藏4

隐藏5

Hide 6
您在哪里定义了
p
和
元素
？CSS转换如何？并使用JavaScript在超时时简单地更改类名。或者简单地使用CSS动画，根本没有JS。我没有得到预期的输出，所以在此询问如何在CSS中执行，然后询问任何解决方案？这很好，但我需要一个接一个的隐藏1和下一个隐藏2，像这样，在这里你一次显示所有项目，你可以开发一些代码并再次发送吗？我的答案已经更新。但谢谢你的帮助answer@ishaanu它复制了在您的示例中，效果完全相同。你怎么能说它没有给出正确的输出呢？令人惊讶的是，这就像一个专业版。但我有一个问题是，在加载页面后，所有的p标记元素都会立即出现并消失，然后代码就开始了。我想消除这种可能性吗？@ishaanu是的，添加了CSS。
    <p id="hide1">Hide 1</p>
    <p id="hide2">Hide 2</p>
    <p id="hide2">Hide 3</p>
    <p id="hide2">Hide 4</p>
    <p id="hide2">Hide 5</p>
    <p id="hide2">Hide 6</p>