当更新了一个时髦的Widget时，我如何运行CSS动画？

Question

我正在制作一个漂亮的小部件，当小部件被更新时，我希望文本淡入/淡出。此时，我只能在加载仪表板页面时才能将小部件动画化。我需要添加什么，以便每次更新小部件时动画都能运行？

下面是小部件的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()