聚合物霓虹灯元素 - 使元素内的图像也触发动画

Question

开发页面

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

最初的Google聚合物演示

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 类（来自图片）。