javascript - transition的问题
本文介绍了javascript - transition的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
做一个轮播图,基本想法是这样:
<div.container><img.slide src=""></div>
通过改变src地址来实现轮播
在写过渡效果的时候遇到了问题(效果为淡入opacity:0→1)
主要代码如下:
slide.src = "images/banner" + index +".jpg";
slide.removeAttribute("style");
slide.style.cssText = "opacity:0;"
slide.style.cssText = "opacity:1;transition-property:opacity;transition-duration:1s;transition-timing-function:ease-in;"
这里写remove的想法是不想有淡出效果
现在的问题是在浏览器中打断点,一步步来,是有效果的,但是现实是没有过度效果的,why?
补充下:希望能用原生JS回答 萌新还没开始学库~
解决方案
出于性能,浏览器会尽可能的把最近的需要渲染的动作整合到一起执行。
可以使用以下两种方式实现一种 nextTick,在上一次渲染结束后执行。
slide.style.cssText = "opacity:0;transition-property:opacity;transition-duration:1s;transition-timing-function:ease-in;"
// 1
requestAnimationFrame(function (){
slide.style.cssText = "opacity:1;"
})
// 2
setTimeout(function (){
slide.style.cssText = "opacity:1;"
}, 0)
这篇关于javascript - transition的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文