就像這個動畫一樣的效果，div 先是隱藏的，點擊按鈕后顯示并且有動畫效果，隱藏的時候同樣。
<button class="btn" id="btn">點擊</button><div class="box" id="box"></div><script>const btn = document.getElementById('btn')const box = document.getElementById('box')let show = falsebtn.onclick = function () {if (show) {box.classList.add('fadeout')box.classList.remove('fadein')} else {box.classList.add('fadein')box.classList.remove('fadeout')}show = !show;}</script>
在css中，可以利用 animation 屬性和 @keyframes 規則來實現元素顯示與隱藏的動畫效果，通過 @keyframes 規則，您能夠創建動畫。
<style>.box {width: 50px;height: 50px;background: red;display: none;}.fadeout {animation: fadeout 1s;}.fadein {display: block;animation: fadein 1s;}/* 移出動畫 */@keyframes fadeout {0% {opacity: 1;display: block;}100% {opacity: 0;display: block;}}/* 進入動畫 */@keyframes fadein {0% {opacity: 0;}100% {opacity: 1;}}</style>
在 CSS 中，display: none; 和 display: block; 是兩種完全不同的屬性，它們控制元素的顯示方式。display: none; 會使元素不可見且不占據空間，而 display: block; 會使元素以塊級元素的方式顯示，并占據相應的空間。
因此，你不能直接在 display: none; 和 display: block; 之間應用動畫效果，因為這兩個屬性之間的切換是瞬間完成的，沒有中間狀態可以應用動畫。
這樣就引發了一個問題：如果我們要設置類似淡入淡出的效果怎么辦？就是讓元素在消失/出現的同時產生動畫怎么辦？不要使用 transition 動畫，而是用 animation 動畫，并且在進入動畫的時候設置元素的顯示，然后在出動畫幀定義的地方設置元素的顯示。
.fadein {/* 注意這行代碼 */display: block; animation: fadein 1s;}/* 移出動畫 */@keyframes fadeout {0% {opacity: 1;/* 注意這行代碼 */display: block;}100% {opacity: 0;/* 注意這行代碼 */display: block;}}
此時我們已知掌握了動畫的基本操作，接下來演示一個基本的彈窗動畫。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {background: red;display: none;position: absolute;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0);padding: 12px;border-radius: 8px;}.fadeout {animation: fadeout 0.3s;}.fadein {display: block;animation: fadein 0.3s;}/* 移出動畫 */@keyframes fadeout {0% {opacity: 1;display: block;}100% {opacity: 0;display: block;}}/* 進入動畫 */@keyframes fadein {0% {transform: translate3d(-50%, -50%, 0) scale(0.9);}50% {transform: translate3d(-50%, -50%, 0) scale(1.1);}100% {transform: translate3d(-50%, -50%, 0) scale(1);}}</style>
</head>
<body><button class="btn" id="btn">按鈕</button><div class="box" id="box">您確定提交數據嗎？</div><script>const btn = document.getElementById('btn')const box = document.getElementById('box')let show = falsebtn.onclick = function () {if (show) {box.classList.add('fadeout')box.classList.remove('fadein')} else {box.classList.add('fadein')box.classList.remove('fadeout')}show = !show;}</script>
</body>
</html>
 靜態合批步驟與所有注意事項\游戲運行時使用代碼啟動靜態合批)
)
![[數據集][目標檢測]雞蛋破蛋數據集VOC+YOLO格式792張2類別](http://pic.xiahunao.cn/[數據集][目標檢測]雞蛋破蛋數據集VOC+YOLO格式792張2類別)
