setInterval()
是 JavaScript 内建函数,用来设置每隔一段时间执行一个函数。下面的例子,Vue中使用JavaScript 来实现过渡 transition的动画效果, 使用了这个函数:
methods: {
beforeEnter(el) {
console.log('beforeEnter&&&&&&7');
console.log(el);
el.style.opacity=0;
},
enter(el, done) {
console.log("enter............");
console.log(el);
let round = 1;
const interval = setInterval(function() {
el.style.opacity = round * 0.01;
round++;
if (round > 100) {
clearInterval(interval);
done();
}
}, 20); // 20 是20 毫秒
},
afterEnter(el) {
console.log("after enter..........");
console.log(el);
},
}
一开始,设置 opacity = 0
, 不透明度 opacity = 0
, 然后每隔 20 milliseconds 毫秒,执行一次 setInterval
里的 function。
opacity
从 0, 0.01, 0.02 一直增加到 1, round
达到 100, opacity
达到上限值 1, 然后调用 clearInterval(interval);
清除interval退出函数。