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

CSS-jQ 200 25/09/2019

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