开发官网问题总结-更新中

开发官网问题集锦
官网

1、丝滑滑动效果
可用于官网链接锚定，点击跳转效果

window.scrollTo({
          top: 0,
          behavior: "smooth",//谷歌，safari适用，火狐失效
});

2、毛玻璃效果
可用于顶部导航栏效果

// CSS
backdrop-filter: saturate(180%) blur(12px);//谷歌，safari适用，火狐失效，360有些卡

在用于异形毛玻璃，如六边形，可用SVG绘制路径，利用clipPath剪切路径，如果边界超出，可用加一个透明边界border: 1px solid transparent;
（此方法造成页面性能问题，最终搁置，首次加载比较慢，一些浏览器卡顿）
以下为斜置六边形毛玻璃效果

//css
.ban2 {
      position: absolute;
      top: 107px;
      right: 139px;
      z-index: 17;
       border: 1px solid transparent;//不加边界毛玻璃效果是个方块
       -webkit-clip-path: url(#banGlass);
       clip-path: url(#banGlass);
       backdrop-filter: saturate(180%) blur(2px);//毛玻璃效果
       background: linear-gradient(
         45deg,
         rgba(64, 140, 253, 0.12),
         rgba(146, 202, 255, 0.12)
       );
      animation: banImgAnim 2.5s infinite alternate linear;//无聊的起伏动画
    }
//html
//svg引用
<div class="ban2">
            <svg width="100%" height="100%" viewBox="0 0 228.64 220.15">
              <use xlink:href="#glassImg" />
            </svg>
</div>
//svg绘制
<svg width="100%" height="100%" viewBox="0 0 228.64 220.15">
        <defs id="glassImg">
          <clipPath id="banGlass">
            <linearGradient
              id="路径_10_"
              gradientUnits="userSpaceOnUse"
              x1="-847.1108"
              y1="651.968"
              x2="-847.1904"
              y2="651.165"
              gradientTransform="matrix(228.6432 0 0 -220.15 193813.2344 143552.0938)"
            >
              <stop offset="0" style="stop-color: #92caff" />
              <stop offset="1" style="stop-color: #408cfd" />
            </linearGradient>

            <polygon
              id="路径_1_"
              class="st5"
              points="84,0 198.4,44.8 232.3,154.9 152,220.1 37.6,175.3 3.7,65.3 "
            />
          </clipPath>
        </defs>
      </svg>

无毛玻璃效果
有毛玻璃效果

3、光轨路径
光轨路径是用svg动画实现的，为svg路径增加模糊路径模拟外发光
有两种思路：
1、svg描边动画：stroke-dashoffset

 <svg id="imgPath1" viewBox="0 0 308.43 297.3">
              <path
                class="cls-1"
                d="M108.66.6.58,88.46,46.22,236.51l153.55,60.24L307.85,208.9,262.21,60.84Z"
                fill="none"
                stroke="url(#grad)"
                filter="url(#blur2)"
                stroke-width="1.5"
                stroke-linecap="round"
                transform="translate(0 -0.03)"
                stroke-dasharray="918,918"
                stroke-dashoffset="918"
              >
                <animate
                  sttributeType="CSS"
                  attributeName="stroke-dashoffset"
                  begin="0s"
                  from="918"
                  to="-918.313"
                  dur="18"
                  fill="freeze"
                  repeatCount="indefinite"
                ></animate>
              </path>
              //模糊滤镜
              <defs>
                <linearGradient id="grad">
                  <stop offset="0" stop-color="#fff" />
                  <stop offset="100" stop-color="#2D63FB" />
                </linearGradient>
              </defs>
              <defs>
                <filter id="blur2" width="120" height="120">
                  <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
                </filter>
              </defs>
            </svg>

2、svg轨迹动画：animateMotion

//画一个要运动的光斑，path改为运动的轨迹
<animateMotion path="M199,346C58,11897,52,12529,52,12529" rotate="auto" begin="click" dur="150s" repeatCount="1" fill="freeze"></animateMotion>

4、页面按次序出现
为了让页面划动时不那么生硬，加了一些按次序出现的动画效果
两种实现方式：
1/页面一加载就出现时可用vue中 < transition>或 < transition-group>
2/页面划动时出现可使用插件aos-动画库
5、按钮光斑效果
按钮悬停时有光斑效果，且光斑随鼠标移动而移动
思路：鼠标进入时添加mouseenter事件，光斑显示
鼠标滑动添加mousemove事件，光斑定位改变
鼠标离开时mouseleave事件，光斑隐藏

//html
<div
      class="TLightBtn cursor"
      ref="btn"
      :style="{width:btnWidth+'px',height:btnHeight+'px',lineHeight:btnHeight+'px'}"
      @mouseenter="handleBtnMaskEnter"
      @mousemove="handleBtnMaskChange"
      @mouseleave="returnBtnMaskChange"
    >
    <slot></slot>
      <div
        class="btn_mask"
        :class="btnStatus ? 'mask' : ''"
        :style="{ transform: btnTrans }"
      ></div>
    </div>
//js
 // 是否显示光斑
    handleBtnMaskEnter() {
      this.btnStatus = true;
    },
    // 光斑移动
    handleBtnMaskChange(event) {
      let x = event.clientX; //鼠标x坐标
      let y = event.clientY; //鼠标y坐标
      let btnX = this.$refs.btn.getBoundingClientRect().x;
      let btnY = this.$refs.btn.getBoundingClientRect().y;
      this.btnChangeX = x - btnX;
      this.btnChangeY = y - btnY;
    },
    // 隐藏光斑
    returnBtnMaskChange() {
      this.btnStatus = false;
    },
    
    // 光斑动画
    btnTrans: function () {
      return (
        "translate(" + this.btnChangeX + "px" + "," + this.btnChangeY + "px)"
      );
    },

6、safari中旋转失效
safari中transform: rotateY(180deg);之后元素消失
原因： Safari 3D变换会忽略z-index的层级
解决方法：
父级，任意父级，非body级别，设置overflow:hidden可恢复和其他浏览器一样的渲染。

移动端

链接：移动端打开
难点：1.首页swiper
在这里插入图片描述

2.留资手势滑动卡片（用translateY而不是top减少页面重绘，减少卡顿）
原理，translateY=卡片距上高度-touchStart y坐标+touchmove y坐标
类似于拖拽
在这里插入图片描述

1、移动端touch事件与click
touchstart（手指放到屏幕上时触发），
touchmove（手指在屏幕上滑动式触发），
touchend（手指离开屏幕时触发），
touchcancel（系统取消touch事件的时候触发，比较少用）。
它们执行的顺序为 touchstart -> touchmove -> touchend -> touchcancel ，其中touchcancel一般情况下不会触发

当用户在点击屏幕的时候，系统会触发touch事件和click事件，touch事件优先处理，touch事件经过捕获，处理, 冒泡一系列流程处理完成后，才回去触发click事件（touch事件先于click「约快300ms」，touchmove和click是相斥的）

在touch事件里面，调用e.preventDefault() 就可以阻止本次点击系统触发的click事件，即本次相关的click都不会执行

与移动端相关的interface主要有三个：

TouchEvent
表示触摸状态发生改变时触发的event

Touch
表示用户和触屏设备之间接触时单独的交互点(a single point of contact)

TouchList
表示一组touches。当发生多点触摸的时候才用的到

touchEvent

identifier:
表示每 1 个 Touch 对象的独一无二的 identifier。有了这个 identifier 可以确保你总能追踪到这个 Touch对象。
screenX:
触摸点相对于屏幕左边缘的 x 坐标。
screenY:
触摸点相对于屏幕上边缘的 y 坐标。
clientX:
触摸点相对于浏览器的 viewport左边缘的 x 坐标。不会包括左边的滚动距离。
clientY:
触摸点相对于浏览器的 viewport上边缘的 y 坐标。不会包括上边的滚动距离。
pageX:
触摸点相对于 document的左边缘的 x 坐标。与 clientX 不同的是，他包括左边滚动的距离，如果有的话。
pageY:
触摸点相对于 document的左边缘的 y 坐标。与 clientY 不同的是，他包括上边滚动的距离，如果有的话。
target:
总是表示手指最开始放在触摸设备上的触发点所在位置的 element。即使已经移出了元素甚至移出了document, 他表示的element仍然不变

2、不想让touch事件触发滚动
touch-action: none;// 禁止触发默认的手势操作
3、用translate代替top定位解决安卓端卡顿问题
4、ios端回弹效果，采用fixed定位
5、ios微信h5长页面出现前进后退底框可以用window的resize监听到
6、自适应高度可以用document.documentElement.clientHeight*n代替vh，适配不同浏览器底部框

开发官网问题总结-更新中

移动端

悦读