Javascript 当该弹出框消失或关闭时，如何在此弹出框中添加反向交易（缩小/缩小效果）

单击区域外的任何位置后，当弹出框关闭时，如何在此弹出框上添加反向交易（缩小/缩小效果）。就像选择文本时弹出窗口出现一样，关闭时我想要的反向动画

当该弹出框消失或关闭时，如何在此弹出框中添加反向交易（缩小/缩小效果）

const container=document.querySelector（'.storypara'）；
const popupContainer=document.querySelector（'.popupContainer'）；
//添加了此方法
//它给出所选文本的HTML文本：）
函数getHTMLOfSelection（）{
var范围；
if（document.selection&&document.selection.createRange）{
range=document.selection.createRange（）；
返回range.htmlText；
}
else if（window.getSelection）{
var selection=window.getSelection（）；
如果（selection.rangeCount>0）{
范围=选择。getRangeAt（0）；
var clonedSelection=range.cloneContents（）；
var div=document.createElement（'div'）；
子类（克隆选择）；
返回div.innerHTML；
}
否则{
返回“”；
}
}
否则{
返回“”；
}
}
container.addEventListener（'mouseup'，（e）=>{
const selectedText=getHTMLOfSelection（）；//首先获取原始HTML文本
如果（选择文本）{
//selectedText.split（“”）.join（“>”）；//同时替换>以使浏览器不呈现它
//console.log（selectedText）；
showPopup（selectedText）；//在文本周围使用“xmp”标记以原样显示html
}
});
popupContainer.addEventListener（'单击'，（事件）=>{
if（event.target.matches（'.popupContainer'））{
popupContainer.classList.remove（'show'）；
}
});
功能显示弹出窗口（selectedText）{
//将所选文本设置为弹出元素内的html
document.querySelector（'.popup'）。innerHTML=selectedText；
popupContainer.classList.add（'show'）；
}

正文{
保证金：0；
}
.popupContainer{
位置：固定；
宽度：100vw；
高度：100vh；
背景：rgba（0,0,0,0.7）；
排名：0；
显示：无；
对齐项目：居中；
证明内容：中心；
颜色：红色；
}
.h2{背景色：黄色；}
.表演{
显示器：flex；
}
.弹出窗口{
背景：#fff；
填充：10px；
边界半径：3px；
长方体阴影：0.5pxRGBA（0,0,0,0.3）；
宽度：80%；
}
/*翻译/动画从这里开始*/
.popup{webkit动画：缩放中心.4s立方贝塞尔（.39、.575、.565,1.000）两者；动画：缩放中心.4s立方贝塞尔（.39、.575、.565,1.000）两者}
@-webkit关键帧向上缩放中心{0%{-webkit变换：缩放（.5）；变换：缩放（.5）}100%{-webkit变换：缩放（1）；变换：缩放（1）}@keyframes向上缩放中心{0%{-webkit变换：缩放（.5）；变换：缩放（.5）}100%{-webkit变换：缩放（1）；变换：缩放（1）}

粗体示例行

下面是一些段落示例。下面是一些段落示例。下面是一些段落示例。下面是一些段落示例。下面是一些段落示例

下面是一个固定的示例：

使用

转换

而不是

动画

更改代码：

• 隐藏容器的不透明度，而不是设置

  display:none

• 添加一个

  转换：将
  转换为
  弹出窗口

• 将

  刻度（0.5）

  添加到

  弹出窗口

• 应用

  show

  时，将

  scale（1）

  添加到弹出窗口

使用

动画

仅在DOM中首次出现时发生。相反，请尝试

transition

，这样可以在应用/删除类名时在值之间平滑过渡