当此弹出框消失或关闭时，如何在此弹出框上添加反向事务(缩小/缩小效果)

Question

单击任何区域后关闭时，如何在此弹出框上添加反向事务(缩小/缩小效果(。就像选择文本时弹出窗口一样，当它关闭时，我想要相同的反向动画。

当此弹出框消失或关闭时，如何在此弹出框上添加反向事务(缩小/缩小效果(

const container = document.querySelector('.storypara');
const popupContainer = document.querySelector('.popupContainer');
// this method is added
// It gives the text of HTML of selected text :)
function getHTMLOfSelection () {
var range;
if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
return range.htmlText;
}
else if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
range = selection.getRangeAt(0);
var clonedSelection = range.cloneContents();
var div = document.createElement('div');
div.appendChild(clonedSelection);
return div.innerHTML;
}
else {
return '';
}
}
else {
return '';
}
}

container.addEventListener('mouseup', (e) => {
const selectedText = getHTMLOfSelection(); // First get the raw HTML text
if (selectedText) {
//selectedText.split("<").join("&lt");    // Now replacing the < so that browser don't render it
//selectedText.split(">").join("&gt");   // Also replacing the > so that browser don't render it
//console.log(selectedText);
showPopup(selectedText); // using the 'xmp' tags around the text, to show the html as it is 
}
});
popupContainer.addEventListener('click', (event) => {
if (event.target.matches('.popupContainer')) {
popupContainer.classList.remove('show');
}
});
function showPopup(selectedText) {
// set the selected text as html inside popup element
document.querySelector('.popup').innerHTML = selectedText;
popupContainer.classList.add('show');
}

body {
margin: 0;
}

.popupContainer {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
top: 0;
display: none;
align-items: center;
justify-content: center;
color: red;

}

.h2 { background-color:yellow; }
.show {
display: flex;
}
.popup {
background: #fff;
padding: 10px;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
width: 80%;
}
/* Transction / Animation Start here */

.popup{-webkit-animation:scale-up-center .4s cubic-bezier(.39,.575,.565,1.000) both;animation:scale-up-center .4s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}

<div class="storypara">
<p><strong>A Bold example Line</strong><br>
Here are some examples of paragraphs. Here are some examples of paragraphs. Here are some examples of paragraphs. Here are some examples of paragraphs. Here are some examples of paragraphs. </p>

</div>
<div class="popupContainer">
<div class="popup"></div>
</div>

当此弹出框消失或关闭时，如何在此弹出框上添加反向事务(缩小/缩小效果(

Answer 1

下面是一个固定的示例：https://codepen.io/annaazzam/pen/pogdmWN

使用transition而不是animation的代码更改：

• 隐藏容器的不透明度，而不是设置display: none
• 向popup添加transition: transform
• 将scale(0.5)添加到popup
• 在应用show时向弹出窗口添加scale(1)

使用animation只是在 DOM 中首次出现某些内容时发生。相反，请尝试transition，它可以让您在应用/删除类名时在值之间平滑转换。