Skip to content

当start与end的状态一致,但需要体现其变化过程时该如何设置? #7

Open
@yumesang

Description

@yumesang

为了实现一个传入数组轮播后消失的效果,我编写了如下代码:

        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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions