Polymère - éléments néon

Neon-animation est utilisé pour implémenter des transitions animées pour les éléments Polymer à l'aide d'animations Web.

Vous pouvez utiliser néon-animation dans votre application, en exécutant la commande suivante pour l'installer dans le répertoire de votre projet.

bower install --save PolymerElements/neon-animation

Cette commande installera tous les éléments liés de néon-animation dans le dossier bower_components.

Exemple

L'exemple suivant spécifie l'utilisation d'animation au néon dans Polymer.js. Créez un fichier index.html et ajoutez-y le code suivant.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "bower_components/paper-styles/demo-pages.html">
      <link rel = "import" href = "bower_components/neon-animation/web-animations.html">
   </head>
   
   <body>
      <h2>Neon Example</h2>
      <a href = "bower_components/neon-animation/demo/declarative/index.html">Declarative</a>
      <br>
      <a href = "bower_components/neon-animation/demo/dropdown/index.html">Dropdown</a>
      <br>
      <a href = "bower_components/neon-animation/demo/grid/index.html">Grid</a>
      <br>
      <a href = "bower_components/neon-animation/demo/tiles/index.html">Tiles</a>
      <br>
      <a href = "bower_components/neon-animation/demo/card/index.html">Card</a>
   </body>
</html>

Production

Pour exécuter l'application, accédez au répertoire de projet créé et exécutez la commande suivante.

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.

Cliquez sur chaque lien. Vous verrez les différents types de transitions animées, qui sont créées à l'aide d'animations Web.

↰ Previous page

Polymère - éléments néon

Exemple

Production

Tutoriel Polymer