Question

我在Polymer模板中有一个<div>，我希望使用CSS进行动画处理。我希望每次调用特定的观察者函数（onTriggered）时都能重新触发动画。

我已尝试使用以下函数添加然后删除CSS类，以便在再次调用观察者时可以重新触发它，但它会返回Cannot read property 'myContainer' of undefined。我理解这是因为Polymer对象无法在Javascript函数中调用，但我无法找到替代解决方案。

onTriggered: function (newData, oldData) {
    if (oldData && oldData !== newData) {
        this.$.myContainer.classList.add("animated", "jello");
        setTimeout(function() {
            this.$.myContainer.classList.remove("animated", "jello");
        }, 1000);
    }
}

同步添加然后（在x秒后）删除Polymer元素中的CSS类的最佳方法是什么？

Answer 1

这是因为您的setTimeout回调函数中的范围已更改。您需要更改范围以在回调中使用this。

请尝试：

setTimeout(function() {
   this.$.myContainer.classList.remove("animated", "jello");
}, 1000, this);

或者这个：

setTimeout(function() {
   this.$.myContainer.classList.remove("animated", "jello");
}.bind(this), 1000);

Answer 2

正如@Kejt所说，范围确实是问题所在。为了解决这个问题，我必须将this分配给变量，然后引用setTimeout函数内的变量，即：

this.$.myContainer.classList.add("animated", "jello");
var polymerThis = this;
setTimeout(function() {
   polymerThis.$.myContainer.classList.remove("animated", "jello");
}, 1000);

聚合物：添加和删除类（1秒后）

2 个答案: