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

【问题标题】：How do I run an CSS animation when a Dashing Widget is updated?更新 Dashing Widget 时如何运行 CSS 动画？
【发布时间】：2014-09-02 12:27:29
【问题描述】：

我正在制作一个 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>

咖啡文件是空的。

【问题讨论】：

我想看看成品。它托管在任何地方吗？ github.com/Shopify/dashing/wiki/Additional-Widgets

标签： dashing

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：