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()

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

2 个答案: