1

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>

コーヒーファイルが空です。

4

2 に答える 2

1

onData 関数で、アニメーションのインとアウトを担当する要素に CSS クラスを適用します。あるいは、JavaScript でアニメーションを処理するだけです。

于 2014-07-31T22:58:30.103 に答える
0

そのコードを textblink.coffee に配置して、javascript に処理させることができます。

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

  onData -> 
    $(@node).fadeOut().fadeIn()
于 2014-09-02T04:27:29.860 に答える