Polymer - Neon Elements

Quiz

Neon-animation is used to implement animated transitions for Polymer elements by using web animations.

You can use neon-animation in your application, by running the following command to install it in your project directory.

bower install --save PolymerElements/neon-animation

This command will install all the related elements of neon-animation under the bower_components folder.

Example

The following example specifies the use of neon-animation in Polymer.js. Create an index.html file and add the following code in it.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src="/?originalUrl=https%3A%2F%2Fdev.tutorialspoint.com%2Fbower_components%2Fwebcomponentsjs%2Fwebcomponents-lite.js"></script>
      <link rel = "import" href="/?originalUrl=https%3A%2F%2Fdev.tutorialspoint.com%2Fbower_components%2Fpolymer%2Fpolymer.html">
      <link rel = "import" href="/?originalUrl=https%3A%2F%2Fdev.tutorialspoint.com%2Fbower_components%2Fpaper-styles%2Fdemo-pages.html">
      <link rel = "import" href="/?originalUrl=https%3A%2F%2Fdev.tutorialspoint.com%2Fbower_components%2Fneon-animation%2Fweb-animations.html">
   </head>
   
   <body>
      <h2>Neon Example</h2>
      <a href="/?originalUrl=https%3A%2F%2Fdev.tutorialspoint.com%2Fbower_components%2Fneon-animation%2Fdemo%2Fdeclarative%2Findex.html">Declarative</a>
      <br>
      <a href="/?originalUrl=https%3A%2F%2Fdev.tutorialspoint.com%2Fbower_components%2Fneon-animation%2Fdemo%2Fdropdown%2Findex.html">Dropdown</a>
      <br>
      <a href="/?originalUrl=https%3A%2F%2Fdev.tutorialspoint.com%2Fbower_components%2Fneon-animation%2Fdemo%2Fgrid%2Findex.html">Grid</a>
      <br>
      <a href="/?originalUrl=https%3A%2F%2Fdev.tutorialspoint.com%2Fbower_components%2Fneon-animation%2Fdemo%2Ftiles%2Findex.html">Tiles</a>
      <br>
      <a href="/?originalUrl=https%3A%2F%2Fdev.tutorialspoint.com%2Fbower_components%2Fneon-animation%2Fdemo%2Fcard%2Findex.html">Card</a>
   </body>
</html>

Output

To run the application, navigate to the created project directory and run the following command.

polymer serve

Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.

Click each link. You will see the different types of animated transitions, which are created using web animations.

polymer_elements.htm

Print Page