移动端：css3的animation执行时影响fixed定位到它上层的元素

发布于 2022-09-07 22:20:47 字数 4513 浏览 18 评论 0

问题描述：

用bootstrap练习响应式开发网页的过程中，想对一个拥有背景图的元素做一个遮罩显示的动画，发现在做动画的过程中会对用position:fixed;定位到它上面的元素产生影响。
发现在做动画的过程中，本来应该层级在下面的元素跑到fixed定位元素的层级上面了。花了数小时经过多方面查找原因，仍然没有找到问题所在。希望大家不吝赐教，先谢谢大家啦。

问题状况图：

图片说明：
图中右上角的按钮就是使用position:fixed的元素，它的下面是一个需要动画的div，div的透明度动画也会对该按钮产生影响。

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <title>blog</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <link rel="icon" href="./statics/icon/favicon.ico"> -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <style>
    body {
      width: 100vw;
      overflow: hidden;
    }

    .container-fluid {
      margin: 0;
      padding: 0;
    }

    .cover-img {
      width: 100%;
      height: 50vh;
      background-attachment: fixed;
      background-color: red;
      /* background-image: url('./statics/images/cover.jpg'); */
      background-repeat: no-repeat;
      -webkit-background-size: 100vw 50vh;
      background-size: 100vw 50vh;
      animation: mask_zoom 1.2s ease-in;
    }

    @keyframes mask_zoom {
      0% {
        opacity: 0;
        -webkit-mask-size: 30%
      }
      40% {
        opacity: .6;
        -webkit-mask-size: 60%
      }
      to {
        opacity: 1;
        -webkit-mask-size: 100%
      }
    }

    @media screen and (max-width: 576px) {
      .navbar {
        position: fixed;
        padding: 0;
        margin-right: 0;
      }
      .navbar-toggler {
        position: fixed;
        top: 10px;
        right: 10px;
        background-color: #343A40;
        /* 清除移动端 fixed 元素抖动问题 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }

      .navbar-brand {
        display: none;
        padding-top: 10px;
      }
      .brand-show {
        display: block;
        padding-top: 15px;
      }
      .navbar-collapse {
        width: 100vh;
      }
    }

  </style>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <a class="navbar-brand" href="#">导航</a>
      /* 图中右上角的按钮，不需要动画却受下面 div 的动画影响 */
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">链接1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接5</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <section class="container-fluid">
    /* 此为需要做动画的元素 */
    <div class="cover-img"></div>
  </section>
  </div>
  <footer>尾部</footer>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
  <script type="text/javascript">
    $(function ($) {
      $('body').niceScroll()
    })
  </script>
</body>

</html>

希望知道原因的可以给我讲讲原理，知道解决方法的也麻烦可以告知一下~~
（发现我用代码块把html代码包裹起来反而一点高亮没有了？？？）

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

分開簡單 2022-09-14 22:20:47

emmm...也是挺无语的，当怼着这个问题来找原因的时候反而找不到，在解决别的问题的时候却凑巧解决了这个问题。
解决方法如下：
因为fixed定位的按钮是属于nav标签的内容，而在它下面的div是属于另外一个父标签。当在做动画的过程中div所在层级被提高了，恰巧大于了nav的层级，所以按钮标签也就被div盖住了。解决方法可以是给nav标签添加属性z-index，只要保证它的值大于div动画时的值即可解决这个问题。
也不知道解释的对不对，如果说错了希望大家指正。