Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
yumesang opened this issue Sep 21, 2021 · 0 comments

Comments

@yumesang
Copy link

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

        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关键字,他将会舍弃除了最后一个设置的关键字(如果关键词重复的话),于是这就产生了问题,在这种情况下我如何能够完成这个显隐效果?又或者我的设置有错误?可以的话请务必告知我可行方法,万分感谢。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant