聚合物:添加和删除类(1秒后)

Question

我有一个<div>Polymer模板,我想用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);