点击头部栏关闭

CSS

    <style>
      .top-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 45px;
        width: 375px;
        background-color: black;
        /* 关键 */
        overflow: hidden;
        transition: all .5s ease-out;
      }
      .delete {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 30px;
        cursor: pointer;
      }
      .delete img {
        height: 10px;
        width: 10px;
      }
      .logo {
        height: 30px;
        width: 30px;
        margin-left:3px;
        margin-right: 30px;
        cursor: pointer;
      }
      span {
        color: white;
        font-size: 14px;
        flex: 1;
  
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .btn {
        width: 94px;
        height: 100%;
        line-height: 45px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        background-color: #F63515;
      }
    </style>

HTML

    <div class="top-bar">
      <div class="delete">
        <img src="./img/delete.png" alt="">
      </div>
      <img class="logo" src="./img/logo.png" alt="">
      <span>打开京东App,购物更轻松</span>
      <div class="btn">立即打开</div>
    </div>

JS代码

<script>
      // 1.获取元素
      var topBar = document.querySelector(".top-bar") as HTMLDivElement
      var deleteEl = topBar.querySelector(".delete")

      // 2.监听delete的点击
      deleteEl.onclick = function(){
        topBar.remove()
        // 第一种方式
        // setTimeout(function(){
        //   topBar.remove()
        // },300)
      }

      // 第二种方式
      topBar.ontransitionend = function(){
        topBar.remove()
      }
    </script>