Javascript 使用聚合物霓虹灯动画在视口中可见时设置元素动画

我有这个元素，现在当我打开页面时，它会有动画

<dom-module id="intro-el">
    <template>
        <style>
            :host {
                display: block;
            }
            iron-image{
                width:500px;
                height: 400px;
                width:100%;
            }
        </style>
        <div >

            <h1 id="animateH1">Test Title</h1>
            <p id="animateP">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis reiciendis distinctio nulla sint.</p>
            <iron-image id="animateImg"src="/images/auto/some.png" preload sizing="contain"></iron-image>

        </div>
    </template>
    <script>
        Polymer({
            is: 'intro-el',
            behaviors: [
              Polymer.NeonAnimationRunnerBehavior

            ],
            properties: {
                animationConfig: {
                    value: function(){
                       return{ 
                           'entryH1': [{
                            name: 'slide-from-bottom-animation',
                            node: this.$.animateH1,
                             timing: {delay: 450}
                        }

                        ],
                        'entryP': [{
                            name: 'slide-from-left-animation',
                             timing: {delay: 650},
                            node: this.$.animateP
                        }

                        ],
                        'entryImg': [{
                            name: 'slide-from-right-animation',
                            node: this.$.animateImg
                        }

                        ]
                    }
                }
                }
            },
            ready: function(){
                this.playAnimation('entryH1');
                this.playAnimation('entryP');
                this.playAnimation('entryImg');


            },

        });
    </script>
</dom-module>

：主持人{
显示：块；
}
铁的形象{
宽度：500px；
高度：400px；
宽度：100%；
}
考试题目
Lorem ipsum door sit amet，奉献精英。无明显症状的面部
聚合物({
是：'介绍el'，
行为：[
聚合物.纳米二氧化钛的性能
],
特性：{
动画配置：{
值：函数（）{
返回{
“entryH1”：[{
名称：“从底部滑动动画”，
节点：this.$.animateH1，
定时：{延迟：450}
}
],
“entryP”：[{
名称：“从左滑入动画”，
定时：{延迟：650}，
节点：此。$.animateP
}
],
“entryImg”：[{
名称：“右侧幻灯片动画”，
节点：此。$.animateImg
}
]
}
}
}
},
就绪：函数（）{
这个.playAnimation（'entryH1'）；
这个.playAnimation（'entryP'）；
这个.playinganimation（'entryImg'）；
},
});

---

我想做的是当元素滚动到视图中时设置动画。当元素滚动到视图中时，有没有办法监听它，或者我可以实现什么行为？多谢各位

我不知道聚合物的行为，但你可以：

<dom-module id="intro-el">
    <template>
        <style>
            :host {
                display: block;
            }
            iron-image {
                width: 500px;
                height: 400px;
            }
        </style>
            <h1 id="animateH1">Test Title</h1>
            <p id="animateP">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis reiciendis distinctio nulla sint</p>
            <iron-image id="animateImg"
                        src="http://www.fillmurray.com/500/400"
                        sizing="contain"
                        preload></iron-image>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'intro-el',
        behaviors: [
          Polymer.NeonAnimationRunnerBehavior

        ],
        listeners: {
            'neon-animation-finish': '_onNeonAnimationFinish'
        },
        properties: {
            isElementInViewport: {
                type: Boolean,
                value: false,
                observer: '_onElementInViewportChanged'
            },
            animationRunning: {
                type: Boolean,
                value: false
            },
            animationConfig: {
                value: function () {
                    return { 
                        'entryH1': [{
                            name: 'slide-from-bottom-animation',
                            node: this.$.animateH1,
                             timing: {delay: 450}
                        }],
                        'entryP': [{
                            name: 'slide-from-left-animation',
                             timing: {delay: 650},
                            node: this.$.animateP
                        }],
                        'entryImg': [{
                            name: 'slide-from-right-animation',
                            node: this.$.animateImg
                        }]
                    }
                }
            }
        },
        ready: function () {
            this._onScroll = this._onScroll.bind(this);
        },
        attached: function () {
            window.addEventListener('scroll', this._onScroll);
            this._triggerAnimation();
        },
        detached: function () {
            window.removeEventListener('scroll', this._onScroll);
        },
        _onScroll: function () {
            if (this.animationRunning) {
                return;
            }
            this._inspectElementPosition();
        },
        _inspectElementPosition: function () {
            let bodyOffset = window.scrollY || window.pageYOffset,
                lowTriggerPoint = this.offsetTop - window.innerHeight * 0.05,
                highTriggerPoint = this.offsetTop + window.innerHeight * 0.05;

            this.isElementInViewport =
                    bodyOffset > lowTriggerPoint && bodyOffset < highTriggerPoint;
        },
        _onElementInViewportChanged (inViewport) {
            if (inViewport) {
                this._triggerAnimation();
            }
        },
        _triggerAnimation: function () {
            ['entryH1', 'entryP', 'entryImg'].forEach((el) => {
                this.playAnimation(el);
                this.animationRunning = true;
            });
        },
        _onNeonAnimationFinish: function () {
            this.animationRunning = false;
        }
    });
</script>

：主持人{
显示：块；
}
铁的形象{
宽度：500px；
高度：400px；
}
考试题目
Lorem ipsum door sit amet，奉献精英。无明显症状的面部
聚合物({
是：'介绍el'，
行为：[
聚合物.纳米二氧化钛的性能
],
听众：{
“霓虹灯动画完成”：“霓虹灯动画完成”
},
特性：{
IsElementView端口：{
类型：布尔型，
值：false，
观察者：“\u OneLementViewPortChanged”
},
动画运行：{
类型：布尔型，
值：false
},
动画配置：{
值：函数（）{
返回{
“entryH1”：[{
名称：“从底部滑动动画”，
节点：this.$.animateH1，
定时：{延迟：450}
}],
“entryP”：[{
名称：“从左滑入动画”，
定时：{延迟：650}，
节点：此。$.animateP
}],
“entryImg”：[{
名称：“右侧幻灯片动画”，
节点：此。$.animateImg
}]
}
}
}
},
就绪：函数（）{
this.\u onScroll=this.\u onScroll.bind（this）；
},
附：函数（）{
window.addEventListener（'scroll'，this.\u onScroll）；
这个；
},
分离：函数（）{
window.removeEventListener（'scroll'，this.\u onScroll）；
},
_onScroll:函数（）{
if（this.animationRunning）{
返回；
}
此._inspectElementPosition（）；
},
_InspectElement位置：函数（）{
让bodyOffset=window.scrollY | | window.pageYOffset，
lowTriggerPoint=this.offsetTop-window.innerHeight*0.05，
highTriggerPoint=this.offsetTop+window.innerHeight*0.05；
此.isElementViewPort=
bodyOffset>lowTriggerPoint&&bodyOffset{
播放动画（el）；
this.animationRunning=true；
});
},
_onOnAnimationFinish:函数（）{
this.animationRunning=false；
}
});