我有这个元素,现在当我打开页面时它会动画。
<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>
我想要做的是在元素滚动到视图时为其设置动画。有没有办法在滚动到视图时听元素,或者是否有任何我可以实现的行为?非常感谢你!
答案 0 :(得分:0)
我不了解Polymer行为,但您可以这样做:
<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>