javascript - polymer NEON 元素 - 使元素内的图像也触发动画

Question

开发页面

http://labs.recgr.com/polymer-dev/our_team.html

原始 Google Polymer 演示

https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages

问题

点击开发页面上(圆形)容器内的(圆形)图像不会触发动画。

我的目标

当访问者点击图像本身时，触发 _onClick 方法(如 this page 的源代码所示)。

_onClick方法代码:

_onClick: function(event) {
  var target = event.target;
  var target_id = target.getAttribute('data-id');

  if (target.classList.contains('circle')) {
    // configure the page animation
    this.sharedElements = {
      'hero': target
    };

    var nodesToScale = [];
    var circles = Polymer.dom(this.root).querySelectorAll('.circle');
    for (var node, index = 0; node = circles[index]; index++) {
      if (node !== event.target) {
        nodesToScale.push(node);
      }
    }
    this.animationConfig['exit'][1].nodes = nodesToScale;

    this.fire('circle-click', {targetId: target_id});
  }
}

相关区域的屏幕截图

问题

这样做的正确方法是什么？

谢谢。

Answer 1

这对我有用:

<div class="horizontal layout">
  <div class="circle center-center horizontal layout" data-id="person1"><img src="https://idrycleaningi.com/image/nino/our_team/mich.jpg" data-id="person1" class="circle-image"></div>
  <div class="circle center-center horizontal layout" data-id="person2"><img src="https://idrycleaningi.com/image/nino/our_team/nino.jpg" data-id="person2" class="circle-image"></div>
  <div class="circle center-center horizontal layout" data-id="person3"><img src="https://idrycleaningi.com/image/nino/our_team/snowden.jpg" data-id="person3" class="circle-image"></div>
  <div class="circle center-center horizontal layout" data-id="person4"><img src="https://idrycleaningi.com/image/nino/our_team/bump.jpg" data-id="person4" class="circle-image"></div>
</div>

_onClick: function(event) {
  var target = event.target;
  var target_id = target.getAttribute('data-id');

  if (target.classList.contains('circle') || target.classList.contains('circle-image')) {
    // configure the page animation
    this.sharedElements = {
      'hero': target
    };

    var nodesToScale = [];
    var circles = Polymer.dom(this.root).querySelectorAll('.circle');
    for (var node, index = 0; node = circles[index]; index++) {
      if (node !== event.target) {
        nodesToScale.push(node);
      }
    }
    this.animationConfig['exit'][1].nodes = nodesToScale;

    this.fire('circle-click', {targetId: target_id});
  }
}

我所做的是将circle-image类添加到图像中，然后，我不仅检查circle类(来自Div)，还允许circle-image 类(来自图像)。