Open
Description
为了实现一个传入数组轮播后消失的效果,我编写了如下代码:
const welcomeMsg = [
{ id: '0', msg: 'Hello' },
{ id: '1', msg: '你好' },
{ id: '3', msg: '在这里xxx的主页' }
]
const num = 4
// const height = document.body.clientHeight
new Scroll('.homepage', {
stages: [{
id: 'helloStage',
scrollNumber: welcomeMsg.length * num,
transition: 500,
items: welcomeMsg.map((item, index) => {
return {
id: item.id,
effects: [{
property: 'opacity',
start: '0',
end: '1',
startAt: num * index,
endAt: num * index + num / 2
}, {
property: 'opacity',
start: '1',
end: '0',
startAt: num * index + num / 2,
endAt: num * index + num
}]
}
})
}]
})
我期望的效果是:透明->msg显现->透明并显示下一个msg,并且所有的msg应该在一个stage中实现
但是实际效果似乎会从后一个设置,也就是start: '1'
的状态开始,查阅了源码,发现初始化时js似乎会遍历每个stage并将其中的item初始化并以item.node.style[effect.property]
的方式设置初值,这就代表如果我在effect中设置同样的css关键字,他将会舍弃除了最后一个设置的关键字(如果关键词重复的话),于是这就产生了问题,在这种情况下我如何能够完成这个显隐效果?又或者我的设置有错误?可以的话请务必告知我可行方法,万分感谢。
Metadata
Metadata
Assignees
Labels
No labels