Javascript 带隐藏溢出的水平文本滑块

因此，我试图创建一个带有隐藏溢出的纯javascript/css垂直文本滑块，并带有一些动画

但我很难弄明白。我已经包括了一个我试图实现的图像表示

要求

• 文本应该是内联块
• 应该隐藏文本溢出
• 活跃的

非常感谢您抽出时间，非常感谢

span{
颜色：黑色；
背景：白色；
字体大小：粗体；
}
身体{
背景：黑色；
颜色：白色；
字号：2em；
字体系列：Arial；
}

启动Promatia

您可以改进这一点：

setTimeout（函数（）{
document.getElementById（“span”）.style.width=“150px”；
},500);
setTimeout（函数（）{
document.getElementById（“span”）.style.width=“0px”；
},2000);
setTimeout（函数（）{
document.getElementById（“span”）.innerHTML=“一个新国家”；
},2300);
setTimeout（函数（）{
document.getElementById（“span”）.style.width=“240px”；
},2500);
span{
颜色：黑色；
背景：白色；
字体大小：粗体；
宽度：0px；
溢出：隐藏；
显示：内联块；
过渡时间：0.3s；
高度：40px；
}
身体{
背景：黑色；
颜色：白色；
字号：2em；
字体系列：Arial；
}
Promatia
您可以改进这一点：


setTimeout（函数（）{
document.getElementById（“span”）.style.width=“150px”；
},500);
setTimeout（函数（）{
document.getElementById（“span”）.style.width=“0px”；
},2000);
setTimeout（函数（）{
document.getElementById（“span”）.innerHTML=“一个新国家”；
},2300);
setTimeout（函数（）{
document.getElementById（“span”）.style.width=“240px”；
},2500);
span{
颜色：黑色；
背景：白色；
字体大小：粗体；
宽度：0px；
溢出：隐藏；
显示：内联块；
过渡时间：0.3s；
高度：40px；
}
身体{
背景：黑色；
颜色：白色；
字号：2em；
字体系列：Arial；
}
Promatia
运行实时版本的代码片段


let items=['Promatia'、'新国家'、'新社会'、'新城市'、'新生活']
设指数=0
让textEl=document.getElementById（'text'））
让wrapperEl=document.getElementById（'wrapper'））
异步函数放大框（）{
如果（index+1>items.length）index=0
textEl.innerHTML=items[index++]
wrapperEl.style.width=textEl.getBoundingClientRect（）.width+'px'
}
异步函数收缩框（）{
等待新承诺（resolve=>setTimeout（resolve，2500））
wrapperEl.style.width='0px'
等待新承诺（resolve=>setTimeout（resolve，250））//使用与动画相同的长度
}
enlargeBox（）。然后（异步（）=>{
while（true）{
等待收缩框（）
等待放大框（）
}
})
#包装器{
过渡：宽度250ms，易于进出；
宽度：0px；
显示：内联flex；
溢出：隐藏；
}
.切换器{
背景：白色；
颜色：黑色；
填充：0 6px；
显示：内联块；
空白：nowrap；
}
身体{
背景：黑色；
颜色：白色；
字体：3em粗体；
}
开始
运行实时版本的代码段


let items=['Promatia'、'新国家'、'新社会'、'新城市'、'新生活']
设指数=0
让textEl=document.getElementById（'text'））
让wrapperEl=document.getElementById（'wrapper'））
异步函数放大框（）{
如果（index+1>items.length）index=0
textEl.innerHTML=items[index++]
wrapperEl.style.width=textEl.getBoundingClientRect（）.width+'px'
}
异步函数收缩框（）{
等待新承诺（resolve=>setTimeout（resolve，2500））
wrapperEl.style.width='0px'
等待新承诺（resolve=>setTimeout（resolve，250））//使用与动画相同的长度
}
enlargeBox（）。然后（异步（）=>{
while（true）{
等待收缩框（）
等待放大框（）
}
})
#包装器{
过渡：宽度250ms，易于进出；
宽度：0px；
显示：内联flex；
溢出：隐藏；
}
.切换器{
背景：白色；
颜色：黑色；
填充：0 6px；
显示：内联块；
空白：nowrap；
}
身体{
背景：黑色；
颜色：白色；
字体：3em粗体；
}
开始
到目前为止您尝试了什么？您是否尝试过改变文本容器的宽度并尝试过溢出？你看过CSS动画并尝试过创建一些基本的动画吗？我尝试过设置超时，但我不知道如何实现它。不知道如何使动画转换轻松地进行@dan到目前为止您尝试了什么？您是否尝试过改变文本容器的宽度并尝试过溢出？你看过CSS动画并尝试过创建一些基本的动画吗？我尝试过设置超时，但我不知道如何实现它。不知道如何使动画转换轻松地工作@Dan