手机端分页上拉下拉动画样式

最新推荐文章于 2023-11-18 16:37:19 发布

码上流星&洒下星辰

最新推荐文章于 2023-11-18 16:37:19 发布

阅读量276

点赞数 4

分类专栏： pc/h5标准文档结构及默认样式

张砚博

本文链接：https://blog.csdn.net/qq_47272950/article/details/120040425

版权

CSS动画下拉刷新加载更多过渡效果状态切换

关键词由CSDN通过智能技术生成

pullload.scss

.pull-load {
   
    position: relative;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .pull-load-head {
   
    position: absolute;
    transform: translate3d(0px, -100%, 0px);
    width: 100%;
  }
  .state-refreshing .pull-load-head,
  .state-refreshed .pull-load-head {
   
    position: relative;
    transform: none;
  }
  .pull-load-body {
   
    position: relative;
  }
  .state-refreshing .pull-load-body {
   
    transition: transform 0.2s;
  }
  .state-reset .pull-load-body {
   
    transition: transform 0.2s;
  }
  /*
     * HeadNode default UI
     */
  .pull-load-head-default {
   
    text-align: center;
    font-size: 12px;
    line-height: 3rem;
    color: #7676a1;
  }
  .state-pulling .pull-load-head-default:after {
   
    content: "下拉刷新";
  }
  .state-pulling.enough .pull-load-head-default:after