使div平滑显示

Question

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

document.getElementById("feedback_button").onclick = () => {
document.getElementById("chat_bubble").classList.toggle("displayNone");
if ($('#button_icon').hasClass("fa-envelope")) {
$('#button_icon').addClass('fa-close');
$('#button_icon').removeClass('fa-envelope');
} else {
$('#button_icon').removeClass('fa-close');
$('#button_icon').addClass('fa-envelope');
}
}

.ChatBubble {
background-color:red;
height: 300px;
transition-duration: 0.5s;
transition-timing-function: ease-in-out ;
}
.feedbackButton {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 1;
font-size: 26px !important;
color: black !important;
text-align: center;
width: 54px;
height: 54px;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 28px; 
background-color:#424240;
cursor: pointer;
transition-duration: 0.5s;
transition-timing-function: ease-in-out ;
}
.buttonIcon {
color: white;
padding-top: 13px;
transition-duration: 0.5s;
transition-timing-function: ease-in-out ;
}
.displayNone {
display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="chat_bubble" class="ChatBubble displayNone">Hello</div>
<a id="feedback_button" class="feedbackButton"><i id="button_icon" class="buttonIcon fa fa-envelope"></i></a>

我正试图添加一个动画；你好"；单击气泡时，消息会平滑地出现和消失(过渡0.5秒(。当聊天气泡从信封图标切换到x图标时，我也在尝试添加同样的平滑过渡。

我尝试过transition-duration: 0.5s; transition-timing-function: ease-in-out ;，我也尝试过"transition:0.5s"，它们似乎一点帮助都没有。有什么建议吗？

Answer 1

不能将样式display与transition混合使用！同时，你必须隐藏ChatBubblediv，所以仅仅opacity是不够的，因为你仍然可以点击div(如果中有内容，比如按钮，如果你点击它就会采取行动！(，所以我们必须添加visibility样式以确保它100%隐藏
在代码中添加了一个函数，当我们单击ChatBubblediv时，该函数会向我们发出警报以进行测试。

document.getElementById("feedback_button").onclick = () => {
document.getElementById("chat_bubble").classList.toggle("displayNone");
if ($('#button_icon').hasClass("fa-envelope")) {
$('#button_icon').addClass('fa-close');
$('#button_icon').removeClass('fa-envelope');
} 
else {
$('#button_icon').removeClass('fa-close');
$('#button_icon').addClass('fa-envelope');
}
}

document.getElementById("chat_bubble").onclick = () => {
console.log("Clicked on ChatBubble div"); 
}

.ChatBubble {
background-color:red;
height: 300px;
display: block;
/* opacity: 0; */
visibility: visible;
transition: all 0.3s;
opacity: 1;
}

.feedbackButton {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 1;
font-size: 26px !important;
color: black !important;
text-align: center;
width: 54px;
height: 54px;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 28px; 
background-color:#424240;
cursor: pointer;
display: block;
}

.buttonIcon {
color: white;
padding-top: 13px;
transition-timing-function: ease-in-out ;
}

.displayNone {
visibility: hidden;
opacity: 0;
transition: all 0.3s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="chat_bubble" class="ChatBubble displayNone">Hello</div>
<a id="feedback_button" class="feedbackButton"><i id="button_icon" class="buttonIcon fa fa-envelope"></i></a>

Answer 2

您可以将其设为opacity: 0，然后将其更改为opacity: 1，并以相同的方式添加其他可设置动画的属性，而不是制作display: none。

Answer 3

不能在display: none属性上使用转换，可以通过更改opacity属性来完成。

本参考资料将对此进行更多解释。

document.getElementById("feedback_button").onclick = () => {
document.getElementById("chat_bubble").classList.toggle("displayNone");
setTimeout(() => {
$("#chat_bubble").css("display", $("#chat_bubble").hasClass("displayNone") ? "none" : "block");
}, 500);

if ($('#button_icon').hasClass("fa-envelope")) {
$('#button_icon').addClass('fa-close');
$('#button_icon').removeClass('fa-envelope');
} else {
$('#button_icon').removeClass('fa-close');
$('#button_icon').addClass('fa-envelope');
}
}

.ChatBubble {
background-color:red;
height: 300px;
transition-duration: 0.5s;
transition-timing-function: ease-in-out ;
}
.feedbackButton {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 1;
font-size: 26px !important;
color: black !important;
text-align: center;
width: 54px;
height: 54px;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 28px; 
background-color:#424240;
cursor: pointer;
transition-duration: 0.5s;
transition-timing-function: ease-in-out ;
}
.buttonIcon {
color: white;
padding-top: 13px;
transition-duration: 0.5s;
transition-timing-function: ease-in-out ;
}
.displayNone {
opacity: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="chat_bubble" class="ChatBubble displayNone">Hello</div>
<a id="feedback_button" class="feedbackButton"><i id="button_icon" class="buttonIcon fa fa-envelope"></i></a>