CSS 显示隐藏动画（动画失效问题）

就像这个动画一样的效果，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>