角度+アニメーション - キーフレームアニメーションのキーフレーム（）

//キーフレームアニメーションのキーフレーム（）関数：遷移アニメーションは複数のステップ（すなわち、複数の一時的なスタイルを）アニメーション、シンプルで理解して：複数のスタイルのバリエーションは、期間内に変更;、複数のステップでありますアニメーション

オフセット値（0-1）; //オフセット値は、アニメーションの各ステップの持続時間を割り当ててもよい大きな値を長時間ことを理解すべき（すなわち、各アニメーションのスタイル定義の変化のタイミング）

インポートから{コンポーネント}「@角度/コア」。
インポート{トリガ、遷移、状態、アニメーション、スタイル、キーフレーム}から「@角度/アニメーション」。

@成分（{
  セレクター：「アプリステータス・スライダー」、
  templateUrl： 'ステータスslider.component.html' 、
  styleUrls：[ '状態-slider.component.css' ]、
  アニメーション：[
    トリガー（ 'slideStatus' 、[
      状態（ '非アクティブ'、スタイル（{backgroundColorの'青' }））、
      状態（ 'アクティブ'、スタイル（{backgroundColorの'オレンジ' }））、

      遷移（ '* =>アクティブ' 、[
        アニメーション（「2S」、キーフレーム（[2S //アニメーションの複数のステップ、背景色は、この段階で0から0.3までのオフセット値は、0-0.6sにおけるこの2Sの使用を理解されるであろう3回、変更時間0.6秒の期間、0.3から1.0の間では、1.4秒0.6-2sを占領しています。
          スタイル（{backgroundColorの：、 '青'のオフセット：0 }）、
          スタイル（{backgroundColorの：、 '赤'オフセット：0.3 }）、
          スタイル（{backgroundColorの： 'オレンジ'、オフセット：1.0 }）
        ]））、
      ]）、
      トランジション（ '* =>非アクティブ' 、[
        アニメーション（ '2S' 、キーフレーム（[
          スタイル（{backgroundColorの： 'オレンジ'、オフセット：0 }）、
          スタイル（{backgroundColorの：、 '赤'オフセット：0.2 }）、
          スタイル（{backgroundColorの：、 '青'オフセット：1.0 }）
        ]））
      ]）、
    ]）
  ]
}）
エクスポートクラスStatusSliderComponent {
  ステータス：「アクティブ」| 「非アクティブ」=「非アクティブ」。

  トグル（）{
    もし（この .status === 'アクティブ' ）{
       この .status = '非アクティブ' 。
    } 他{
       この .status =「アクティブ」。
    }
  }
}

< ナビゲーション> 
  < ボタン（クリック）= "トグル（）" >トグルステータス</ ボタン> 
</ NAV >

< DIV [@slideStatus] = "ステータス" クラス= "箱" >
  {{状態== 'アクティブ'？'アクティブ'： '非アクティブ'}}
</ DIV >

：ホスト { 
  表示：ブロック。
}

■は { 
  幅：300ピクセル。
  ボーダー：5pxの黒一色。
  表示：ブロック ; 
  行の高さ：300ピクセル ; 
  テキスト整列：センター ; 
  フォントサイズ：は50px ; 
  色：白 ;
}

//ワイルドカードは、私はプレースホルダとして理解この映画のためにワイルドカードを使用します。

インポート{
  成分、
  入力、
  出力、
  持つEventEmitter
}から「@角度/コア」。
インポート{
  引き金、
  状態、
  スタイル、
  アニメイト、
  遷移
}から「@角度/アニメーション」。

インポート{ヒーロー}「./hero」。

@成分（{
  セレクター： 'アプリヒーロー・リスト-auto'で、
  templateUrl： 'ヒーローリスト-auto.component.html' 、
  styleUrls：[」./hero-list-page.component.css' ]、
  アニメーション：[
    トリガー（ 'shrinkOut' 、[
      状態（「で」、スタイル（{高さ：「*」}））、// 高さ不明定義 
      移行（「* =>ボイド」、[ // トリガ残す値が除去されたときに/ HTMLページ要素 
        スタイル（{高さ： '*'}）// HTML要素の高さを除去する取得 
        アニメーション（250、スタイル（{高さ：0}））// アニメーションの実行を、高さが0になります
      ]）
    ]）
  ]
}）
エクスポートクラスHeroListAutoComponent {
   @Input（）ヒーロー：ヒーロー[]。

   @output（）を削除 = 新しい持つEventEmitter <番号> （）;

   removeHero（ID：番号）{
     この.remove.emit（ID）。
   }
}

< UL クラス= "英雄" > 
  < 李* ngFor = "英雄の英雄を聞かせて" 
      [@shrinkOut] = " '中'" （クリック）= "removeHero（hero.id）" > 
      < divのクラス= "インナー" > 
        < スパンクラス= "バッジ" > {{hero.id}} </ スパン> 
        < スパン> {{hero.name}} </ スパン> 
      </ DIV > 
  </ 李> 
</ UL >

角度+アニメーション - キーフレームアニメーションのキーフレーム（）

おすすめ