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

文章摘要chatGPT

standby chatGPT responsing..

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]访问元素