Javascript 使div平滑地出现

我制作了一个聊天泡泡，用户点击泡泡，就会出现一条消息。我使用的代码如下所示：

document.getElementById（“反馈按钮”）.onclick=（）=>{
document.getElementById（“chat_bubble”）.classList.toggle（“displayNone”）；
if（$（'#按钮图标'）.hasClass（“fa信封”））{
$（“#按钮图标”）.addClass（'fa-close'）；
$（“#按钮图标”）.removeClass（'fa-envelope'）；
}否则{
$（“#按钮图标”）.removeClass（'fa-close'）；
$（“#按钮图标”）.addClass（'fa-envelope'）；
}
}

.chatbuble{
背景色：红色；
高度：300px；
过渡时间：0.5s；
过渡定时功能：易进易出；
}
.反馈按钮{
位置：固定；
底部：25px；
右：25px；
z指数：1；
字体大小：26px！重要；
颜色：黑色！重要；
文本对齐：居中；
宽度：54px；
高度：54px；
-webkit边界半径：27px；
-moz边界半径：27px；
边界半径：28px；
背景色：#424240；
光标：指针；
过渡时间：0.5s；
过渡定时功能：易进易出；
}
巴顿尼康先生{
颜色：白色；
填充顶部：13px；
过渡时间：0.5s；
过渡定时功能：易进易出；
}
.displayNone{
显示：无；
}

你好

您不能在

显示：无

属性上使用转换，它可以通过更改

不透明度

属性来完成

这将进一步解释这一点

document.getElementById（“反馈按钮”）.onclick=（）=>{
document.getElementById（“chat_bubble”）.classList.toggle（“displayNone”）；
设置超时（（）=>{
$（“聊天气泡”）.css（“显示”）、$（“聊天气泡”）.hasClass（“显示气泡”）？“无”：“块”）；
}, 500);
if（$（'#按钮图标'）.hasClass（“fa信封”））{
$（“#按钮图标”）.addClass（'fa-close'）；
$（“#按钮图标”）.removeClass（'fa-envelope'）；
}否则{
$（“#按钮图标”）.removeClass（'fa-close'）；
$（“#按钮图标”）.addClass（'fa-envelope'）；
}
}

.chatbuble{
背景色：红色；
高度：300px；
过渡时间：0.5s；
过渡定时功能：易进易出；
}
.反馈按钮{
位置：固定；
底部：25px；
右：25px；
z指数：1；
字体大小：26px！重要；
颜色：黑色！重要；
文本对齐：居中；
宽度：54px；
高度：54px；
-webkit边界半径：27px；
-moz边界半径：27px；
边界半径：28px；
背景色：#424240；
光标：指针；
过渡时间：0.5s；
过渡定时功能：易进易出；
}
巴顿尼康先生{
颜色：白色；
填充顶部：13px；
过渡时间：0.5s；
过渡定时功能：易进易出；
}
.displayNone{
不透明度：0；
}

你好

您可以将其设置为

不透明度：0

并将其更改为

不透明度：1

，而不是设置

显示：无

，并以相同的方式添加其他可设置动画的属性。

您不能将样式

显示

与

转换

混合使用！同时你必须隐藏聊天泡泡，所以光是不透明度是不够的，因为你仍然可以点击这个div（如果里面有一个内容，比如一个按钮，如果你点击它就会采取行动！），所以我们必须添加

可见性

样式来确保它是100%隐藏的。
在代码中添加了一个函数，当我们单击

chatbuble

div时，该函数会向我们发出警报，以进行测试

document.getElementById（“反馈按钮”）.onclick=（）=>{
document.getElementById（“chat_bubble”）.classList.toggle（“displayNone”）；
if（$（'#按钮图标'）.hasClass（“fa信封”））{
$（“#按钮图标”）.addClass（'fa-close'）；
$（“#按钮图标”）.removeClass（'fa-envelope'）；
} 
否则{
$（“#按钮图标”）.removeClass（'fa-close'）；
$（“#按钮图标”）.addClass（'fa-envelope'）；
}
}
document.getElementById（“chat_bubble”）.onclick=（）=>{
log（“单击chatbuble div”）；
}

.chatbuble{
背景色：红色；
高度：300px；
显示：块；
/*不透明度：0*/
能见度：可见；
过渡：均为0.3秒；
不透明度：1；
}
.反馈按钮{
位置：固定；
底部：25px；
右：25px；
z指数：1；
字体大小：26px！重要；
颜色：黑色！重要；
文本对齐：居中；
宽度：54px；
高度：54px；
-webkit边界半径：27px；
-moz边界半径：27px；
边界半径：28px；
背景色：#424240；
光标：指针；
显示：块；
}
巴顿尼康先生{
颜色：白色；
填充顶部：13px；
过渡定时功能：易进易出；
}
.displayNone{
可见性：隐藏；
不透明度：0；
过渡：均为0.3秒；
}

你好

光靠不透明度是不够的！你仍然可以点击

chatbuble

divI更新我的答案。在动画完成后，可以使用上述代码段中的

setTimeOut

函数隐藏

chatbuble

@哈库纳塔塔