CSS 显示隐藏动画(动画失效问题)

就像这个动画一样的效果,div 先是隐藏的,点击按钮后显示并且有动画效果,隐藏的时候同样。

js 复制代码
  <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 = false
    btn.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 规则,您能够创建动画。

js 复制代码
  <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 动画,并且在进入动画的时候设置元素的显示,然后在出动画帧定义的地方设置元素的显示。

js 复制代码
    .fadein {
      /* 注意这行代码 */
      display: block; 
      animation: fadein 1s;
      
    }
	/* 移出动画 */
    @keyframes fadeout {
      0% {
        opacity: 1;
        /* 注意这行代码 */
        display: block;
      }
      100% {
        opacity: 0;
        /* 注意这行代码 */
        display: block;
      }
    }

此时我们已知掌握了动画的基本操作,接下来演示一个基本的弹窗动画。

js 复制代码
<!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 = false
    btn.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>
相关推荐
nppe64 分钟前
sequlize操作mysql小记
前端·后端
Moment13 分钟前
面试官:一个接口使用postman这些测试很快,但是页面加载很慢怎么回事 😤😤😤
前端·后端·面试
诗书画唱16 分钟前
【前端面试题】JavaScript 核心知识点解析(第二十二题到第六十一题)
开发语言·前端·javascript
excel23 分钟前
前端必备:从能力检测到 UA-CH,浏览器客户端检测的完整指南
前端
前端小巷子29 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
悟空聊架构36 分钟前
我的网站被攻击了,被干掉了 120G 流量,还在持续攻击中...
java·前端·架构
CodeSheep38 分钟前
国内 IT 公司时薪排行榜。
前端·后端·程序员
尖椒土豆sss41 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录,不报错问题!
前端·vue.js
遗悲风42 分钟前
html二次作业
前端·html
江城开朗的豌豆1 小时前
React输入框优化:如何精准获取用户输入完成后的最终值?
前端·javascript·全栈