背景

在使用Polymer里面的Neon-Animation时，已经在A-Element中加入配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
animationConfig: {
    value: function(){
        return {
            'finish': {
                name: 'fade-out-animation',
                node: this.$.spinner,
                timing: {
                    duration: 1000
                }
            },
            'trans': {
                name: 'hero-animation',
                id: 'trans',
                fromPage: this,
                timing: {
                    duration: 1000,
                    delay: 1000
                }
            }
        }
    }
},

sharedElements: {
    value: function() {
        return {
            'ripple': this.$.spinner
        }
    }
}

并且在B-Element中加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
animationConfig: {
    value: function() {
        return {
            'trans': {
                name: 'ripple-animation',
                id: 'ripple',
                toPage: this
            }
        };
    }
},

sharedElements: {
    value: function(){
        return {
            'ripple': this.$.toast
        }
    }
}

并且import了需要的包，但是每次执行trans动画的时候就提示

1
ripple-animation: toPage is undefined

分析

想法一

进入到console出这个语句的文件，neon-shared-element-animation-behavior.html

1
2
3
4
5
6
var fromPage = config.fromPage;
var toPage = config.toPage;
if (!fromPage || !toPage) {
  console.warn(this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!');
  return null;
}

这里的config是从其他地方传进来的，而传入的位置是ripple-animation，

1
2
3
4
configure: function(config) {
  var shared = this.findSharedElements(config);
  ...
}

而这里又是传入的，而这个configure应该是web-animation的内部调用过程，要去看整个文件显然不现实，所以换一个方向入手。

想法二

neon-animation自带的例子中，shared animation都是使用neon-animated-page，而我没有使用，也就是说neon-animated-page在其中做了某些工作，让toPage可以正常匹配上，所以查看neon-animated-page，源码不多，容易找到这一段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// on first load, ensure we run animations only after element is attached.
if (!this.isAttached) {
  this.async(function () {
    this.playAnimation(undefined, {
      fromPage: null,
      toPage: selectedPage
    });
  });

} else {
  this.playAnimation(undefined, {
    fromPage: oldPage,
    toPage: selectedPage
  });
}

可以看到，这里playAnimation的时候，即切换页面时，自动把toPage和fromPage加上去了，所以，shared animation并不会自动根据动画名称去匹配上，而需要自己匹配。

也就是说，在不使用animated-page时，在playAnimation之前可以直接给有起始元素加上toPage即可。

解决办法

所以可以删掉B-Element里面的animationConfig了，只需要保留sharedElements。然后在A-Element.playAnimation('trans')之前，给A-Element加上toPage即可

1
2
3
4
var $b = document.body.querySelector('b-element');
$a.animationConfig['trans'].toPage = $b;
$b.style.display = 'inline';
$a.playAnimation('trans');