Javascript 使用skrollr时不透明度开始值错误

我第一次尝试使用它，但在正确使用它时遇到了困难。我只想说：

当

.slide

的顶部位于视口顶部时，请将“不透明度”设置为1，然后当

.slide

的底部位于视口顶部时，它应该已经从1到0设置了动画

基本上，当用户滚动通过

.slide

时，效果将是文本淡入空白

问题是页面加载时不透明度已经小于1。

body {
    height: 2000px;
    margin: 0;
}

.slide {
    position: relative;
    background-color: #f0f0f0;
    height: 500px;
}

h1 {
    position: absolute;
    bottom: -50px;
    left: 50px;
    font-size: 38px;
}

<section class="slide">
    <h1 data-anchor-target=".slide" data-bottom-top="opacity: 1" data-top-bottom="opacity: 0">I should fade out</h1>
</section>

var s = skrollr.init();

正文{
高度：2000px；
保证金：0；
}
.幻灯片{
位置：相对位置；
背景色：#f0；
高度：500px；
}
h1{
位置：绝对位置；
底部：-50px；
左：50px；
字号：38px；
}
我应该淡出
var s=skrollr.init（）；

小提琴：

编辑：

我已经通过将

data-bottom-top=“opacity:1”

更改为

data-0=“opacity:1”

解决了这个问题，但我想知道为什么前者不起作用，因为我认为它们是一样的

当.slide的顶部位于视口的顶部时，将“不透明度”设置为1，然后当.slide的底部位于视口的顶部时，它应该已从1设置到0的动画

那就是

<h1 data-anchor-target=".slide" data-top-top="opacity: 1" data-top-bottom="opacity: 0">I should fade out</h1>

我应该淡出

不是

我应该淡出

<h1 data-anchor-target=".slide" data-top-bottom="opacity: 1" data-top-bottom="opacity: 0">I should fade out</h1>