How do I run an CSS animation when a Dashing Widget is updated?

Question

I am making a Dashing widget and I would like the text to fade in/out when the widget is updated. At this point I can only get the widget to animate when the dashboard page is loaded. What do I need to add so that the animation runs every time the widget is updated?

Here is the scss for the widget:

// ----------------------------------------------------------------------------
// 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; }
}

Here is the html:

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

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

The coffee file is empty.

Answer 1

In your onData function, apply the CSS class to the element responsible for animating in and out. Or alternatively just handle the animation in JavaScript.

Answer 2

You can put that code on your textblink.coffee and let the javascript handle it

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

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