2022

在less中写css3动画不生效问题

2022-03-01

在react项目中，因为有用到css动画效果给一个图片无限旋转360度，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes rotatecm{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@-webkit-keyframes rotatecm{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
.s-rotate {
  animation: rotatecm 3s linear infinite;
  -webkit-animation: rotatecm 3s linear infinite;
  -moz-animation: rotatecm 3s linear infinite;
  -o-animation: rotatecm 3s linear infinite;
}

页面已经展示出s-rotate这个类的代码但是动画就是不执行，排查了半天定位到是不是less的问题，因为自己有测试在w3school里动画是可以生效的；看了下页面源码，研究了一下发现是因为我配置了css module的原因，动画名被hash了但是引用却没有引用已被hash的动画名，修改一下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:global(.s-rotate){
  @name: ~`'rotatecm'`;
    @keyframes @name{
      from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
    }
    @-webkit-keyframes @name{
      from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
    }
    animation: @name 3s linear infinite;
    -webkit-animation: @name 3s linear infinite;
    -moz-animation: @name 3s linear infinite;
    -o-animation: @name 3s linear infinite;
}

Video兼容性问题

2022-02-22

最近在做校招网站的时候有用到video标签，ios里面默认全屏播放，这边产品不想全屏，解决办法：

1
<video src="media/demo.mp4" id="video" poster="images/demo.jpg" preload width="100%" controls webkit-playsinline></video>

在ios15以上的版本中还有一个bug就是设置了video标签的poster时，视频播放有声音，画面不动。去掉poster就可以正常播放，我这边给的思路：
判断在安卓系统中正常走poster，在ios中给不使用poster属性增加dom元素，用定位直接铺在视频上。层级z-index给个-1就可以了，不需要做其他操作。注（如果安卓跟ios都用这个方法因为层级问题安卓会有层级bug所以分开判断）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="m-video">
  <video
    controls
    controlsList="nodownload"
    x5-playsinline
    playsinline="playsinline"
    x5-video-player-type="h5"
    x5-video-player-fullscreen="true"
    webkit-playsinline="webkit-playsinline"
    x-webkit-airplay
    x5-video-orientation="portraint"
  >
    <source
      src="demo.mp4"
      type="video/mp4"
    />
  </video>
  <span class="m-img">
    <img src="demo.png" />
  </span>
</div>

JavaScript关闭当前页

2022-02-18

出于安全考虑，普通页面直接执行window.close()时不会生效，控制台会出现如下警告：

1
Scripts may not close windows that were not opened by script.

只有那些通a标签或者window.open()打开的页面才支持关闭，为什么这么规定呢？可能是直接输入地址访问的页面可能比较重要，减少被恶意JS攻击的可能性吧，所以规定只有用脚本（或代码）打开的页面才能用脚本关闭。

IE和火狐还未测试，Chrome已没问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 关闭页面
closeCurrentPage() {
  const ua = window.navigator.userAgent;
  if (ua.indexOf('MSIE') > 0) {
    if (ua.indexOf('MSIE 6.0') > 0) {
      window.opener = null;
      window.close();
    } else {
      window.open('', '_top');
      window.top.close();
    }
  } else {
    window.opener = null;
    window.open('', '_self', '');
    window.close();
  }
}

还有种方法通过a标签的方式去操作

1
<a href="javascript:window.close()">关闭</a>
© 2022 一个爱听歌的搬砖工 - Powered by Hexo - Theme Chan