ポリマー-ネオン要素

*Neon-animation* は、Webアニメーションを使用してPolymer要素のアニメーション化されたトランジションを実装するために使用されます。

次のコマンドを実行してプロジェクトディレクトリにインストールすることにより、アプリケーションでneon-animationを使用できます。

bower install --save PolymerElements/neon-animation

このコマンドは、bower_componentsフォルダーの下にneon-animationのすべての関連要素をインストールします。

例

次の例では、Polymer.jsでのネオンアニメーションの使用を指定しています。 indexlファイルを作成し、その中に次のコードを追加します。

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymerl">
      <link rel = "import" href = "bower_components/paper-styles/demo-pagesl">
      <link rel = "import" href = "bower_components/neon-animation/web-animationsl">
   </head>

   <body>
      <h2>Neon Example</h2>
      <a href = "bower_components/neon-animation/demo/declarative/indexl">Declarative</a>
      <br>
      <a href = "bower_components/neon-animation/demo/dropdown/indexl">Dropdown</a>
      <br>
      <a href = "bower_components/neon-animation/demo/grid/indexl">Grid</a>
      <br>
      <a href = "bower_components/neon-animation/demo/tiles/indexl">Tiles</a>
      <br>
      <a href = "bower_components/neon-animation/demo/card/indexl">Card</a>
   </body>
</html>

出力

アプリケーションを実行するには、作成されたプロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

ポリマーネオン要素

各リンクをクリックします。 Webアニメーションを使用して作成された、さまざまな種類のアニメーション化されたトランジションが表示されます。

Polymer-neon-elements

ポリマー-ネオン要素

例

出力