- Polymer Tutorial
- Polymer - Home
- Polymer - Overview
- Polymer - Installation
- Polymer - Elements
- Polymer - Custom Elements
- Polymer - Shadow DOM and Styling
- Polymer - Events
- Polymer - Data System
- Polymer Useful Resources
- Polymer - Quick Guide
- Polymer - Useful Resources
- Polymer - Discussion
Polymer - Neon Elements
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 = "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>
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.
To Continue Learning Please Login
Login with Google