0
이 요소가 있으며 페이지를 열면 애니메이션이 적용됩니다.폴리머 네온 애니메이션이 적용된 뷰포트에서 요소가 애니메이션으로 나타납니다.
<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>
필자가 원하는 것은 요소가 화면으로 스크롤 될 때 애니메이션을 적용하는 것입니다. 보기로 스크롤 할 때 요소를들을 수있는 방법이 있습니까? 구현할 수있는 동작이 있습니까? 고마워요!