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

【问题标题】：Polymer: Add and remove class (after 1 second)聚合物：添加和删除类（1 秒后）
【发布时间】：2017-06-06 10:25:18
【问题描述】：

我在 Polymer 模板中有一个 <div>，我想使用 CSS 制作动画。我希望能够在每次调用特定的观察者函数 (onTriggered) 时重新触发动画。

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

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

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

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

这是因为范围在setTimeout回调函数改变。您将需要范围更改为使用this回调里面。 P>

请尝试：

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

或者这个：

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

【讨论】：

谢谢你把我在正确的轨道上！范围确实是问题。您的代码似乎没有直接的工作，但这个分配给一个变量做了赛道！ SPAN>
只要写的无测试：））跨度>

【解决方案2】：

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

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

【讨论】：