ポリマーネオンアニメーションでビューポートに可視の要素をアニメ化

Question

私はこの要素を持っており、ページを開くとアニメーション化されます。

<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> 

私がしたいことは、要素がスクロールして表示されるときにアニメーション化することです。ビューにスクロールするときに要素を聴く方法はありますか、実装できる動作がありますか？どうもありがとうございました！

Answer 1

私はポリマーの挙動については知らないが、あなたが行うことができます：

<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>