Fatal编程技术网
  • javascript/
  • Javascript 如何使用innerHTML平滑地进行文本转换，并在更改时淡入/淡出？

Javascript 如何使用innerHTML平滑地进行文本转换，并在更改时淡入/淡出？

javascript html

Javascript 如何使用innerHTML平滑地进行文本转换，并在更改时淡入/淡出？,javascript,html,transition,Javascript,Html,Transition,这是我的第一篇帖子，所以如果我对帖子的格式有点不适应，请原谅我。所以我正在为一个游戏团队编写一个网站，他们想要他们的花名册。当你把鼠标悬停在一个名字上时，有一些盒子里有玩家的名字，可以扩展并提供一些信息。我已经让它扩展和更改文本，但它看起来有点突然。有没有办法使文本更改更平滑？我不能为每一个单独的CSS，因为至少会有20个。我目前的进展如下。提前谢谢！ 函数替换元素，替换{ element.innerHTML=替换； } 功能不可替换元素、替换{ element.innerHTML=替换； }

这是我的第一篇帖子，所以如果我对帖子的格式有点不适应，请原谅我。所以我正在为一个游戏团队编写一个网站，他们想要他们的花名册。当你把鼠标悬停在一个名字上时，有一些盒子里有玩家的名字，可以扩展并提供一些信息。我已经让它扩展和更改文本，但它看起来有点突然。有没有办法使文本更改更平滑？我不能为每一个单独的CSS，因为至少会有20个。我目前的进展如下。提前谢谢！ 函数替换元素，替换{ element.innerHTML=替换； } 功能不可替换元素、替换{ element.innerHTML=替换； } .盒子{ 背景色：81C441； 显示：内联块； 利润率：0px 10px； 文本对齐：居中； 线高：180px； 宽度：200px； 高度：180像素； 边缘底部：20px； 字体系列：arial； 过渡：1s； 变换：scale1.0； } .box:悬停{ 过渡：1s； 转换：scale1.1； } 名称
您无法轻松地设置内容更改的动画-例如，按照无法设置字体系列动画的相同逻辑

但是，您可以重叠这两个文本，只需将鼠标悬停在父元素上而不使用JS即可更改它们的属性

包括演示

.包装纸{ 位置：相对位置； } .toHide、.toShow{ 过渡：不透明度1s缓进缓出； 位置：绝对位置； } 托肖先生{ 不透明度：0； } .wrapper:hover.toHide{ 不透明度：0； } .wrapper:hover.toShow{ 不透明度：1； } 名称 位置 名称 位置 名称 位置 名称 位置
您无法轻松地设置内容更改的动画-例如，按照无法设置字体系列动画的相同逻辑

但是，您可以重叠这两个文本，只需将鼠标悬停在父元素上而不使用JS即可更改它们的属性

包括演示

.包装纸{ 位置：相对位置； } .toHide、.toShow{ 过渡：不透明度1s缓进缓出； 位置：绝对位置； } 托肖先生{ 不透明度：0； } .wrapper:hover.toHide{ 不透明度：0； } .wrapper:hover.toShow{ 不透明度：1； } 名称 位置 名称 位置 名称 位置 名称 位置
在CSS中使用@keyframes怎么样？可以使用一个关键帧处理多个元素的单一类型的动画。虽然功能不同，但这里有一个例子：谢谢你的回答！我已经能够让事情淡入淡出，我只是在努力让它淡出，改变，然后重新淡入。很抱歉不够清晰。在CSS中使用@keyframes怎么样？可以使用一个关键帧处理多个元素的单一类型的动画。虽然功能不同，但这里有一个例子：谢谢你的回答！我已经能够让事情淡入淡出，我只是在努力让它淡出，改变，然后重新淡入。很抱歉不够清晰。这正是我需要的！非常感谢！这正是我需要的！非常感谢！