dashing - 更新 Dashing Widget 时如何运行 CSS 动画？

Question

我正在制作一个 Dashing 小部件，我希望在小部件更新时文本淡入/淡出。在这一点上，我只能在加载仪表板页面时让小部件进行动画处理。我需要添加什么才能在每次更新小部件时运行动画？

这是小部件的 scss：

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #ec663c;

$title-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------
.widget-textblink {

  background-color: $background-color;

  .title {
    color: $title-color;
  }

  .text {
    color: $moreinfo-color;
    animation: blink;
    animation-duration: 1s;
    animation-iteration-count: 15;
  }
}

@keyframes blink {
    0% { opacity: 1.0; }
    50% { opacity: 0.35; }
    100% { opacity: 1.0; }
}

这是html：

<h1 class="title" data-bind="title"></h1>

<p class="text" data-bind="text"></p>

咖啡文件是空的。

Answer 1

在您的 onData 函数中，将 CSS 类应用于负责动画进出的元素。或者只是在 JavaScript 中处理动画。

Answer 2

您可以将该代码放在您的 textblink.coffee 并让 javascript 处理它

#textblink.coffee
class Dashing.InfoProgress extends Dashing.Widget

  onData -> 
    $(@node).fadeOut().fadeIn()