关于 CSS transition 过渡无效问题小总结

20°C 25-09-2019
最近更新于:2022-06-16 00:26:12

transition 过渡无效

总结 2 点:

  • 1:没有规定过渡动画的初始值,比如设置 opacity 动画,设置了 transition 和过渡完成后的 opacity 值,动画无效。
  • 2:被过渡元素的子元素设置了 z-index,这里就算过渡动画与 position 位移无关,其相应的 transition 动画仍然无效。

笔记点

解决方法:

  1. 为被过渡元素设置动画初始值,比如:opacity:0;
  2. 子元素存在 z-inde,为其父元素(被过渡元素)添加 z-index 值即可;

另记 jq 监听 video 状态/video.paused

var _video = $('video')[0];
  setInterval(function(){
  	if(_video.paused){
  	  //video paused
  	}else{
	  //video playing
  	}
  }, 500);

需要注意的是,jq不支持原生ja操作video,需要使用[0]访问元素


评论留言

既来之则留之,欢迎在下方留言评论。提交评论后还可以撤销或重新编辑,未发布的留言会被储存在本地以供下次继续编辑(Valine 会自动保存您的评论信息到浏览器)