Comments (10)
- Animation (morphing) will trigger when there is a change in
icon
attribute from your controller and that if the new icon is different from currently displayed. - Yes.
- I recommend looking at index.html and demo.js in this repo. That's the code behind live demo.
from angular-material-icons.
Ok.. figured there was maybe just some holes in the instructions. I was just going from this doc:
https://klarsys.github.io/angular-material-icons/
and there is no mention on how to make it animate or the mechanics, just says to include morpheus. Maybe just add parenthetically in that doc (..."see the demo for details on how the animation works from one icon to another via your controller") or something like that. Think most developers all they need is a working example and they can figure it out right?
thanks I will give it a go and let you know if i have any luck... sure i can figure it out because i see your stuff animating :)
from angular-material-icons.
OK. Updated the document.
from angular-material-icons.
@jeffthompson1971 how did you make it to work?
@urmilparikh what changes you have made this to work in the document?
from angular-material-icons.
@sajeetharan, you can refer source of demo page (index.html in github).
Basically, when including directive in your html, use something like:
<ng-md-icon icon="{{icon}}"></ng-md-icon>
...and then change $scope.icon
in your controller based on timer or some other event.
from angular-material-icons.
I Have done that, the demo works fine . when i take a single icon and trying to animate it does not work? can you add a working sample for single icon animation?
from angular-material-icons.
Morphing can happen only between two different icons. For animating single icon, consider using css.
from angular-material-icons.
Strange issue here, but my icon will not change unless I hover over it (ie, it won't do it automatically). Doesn't seem to be happening on the demo site and I'm not sure why this is happening. Has it happened before?
from angular-material-icons.
Can you share a plunker or a codepen showcasing the issue?
from angular-material-icons.
Fortunately it looks like it was just me being dumb. I eventually remembered that I was modifying the data outside of angulars digest scope, and hovering over it triggered a digest. All good now. Thanks for the library!
from angular-material-icons.
Related Issues (20)
- Icon is not centered inside <md-button> HOT 4
- Missing equal sign in 3rd circle of bubble_chart
- Icon disappear after md-fab-toolbar collapse HOT 4
- icons not loading when we load them by using Bower
- Help! Error on ionic upload HOT 1
- Angular2 support HOT 3
- Icon not centering in Angular Material HOT 1
- Getting error TS1219
- Option to build with few / without any icons
- Custom icon not resizing correctly HOT 1
- How to use my own SVG or PNG icon? HOT 1
- angular slick carousel does not respect viewBox of the ng-md-icon HOT 1
- Search for icons on the live demo HOT 1
- Center icon when inside md-button.md-icon-button HOT 1
- Rename arrow_upwards icon to arrow_upward
- Should not be loading Angular Material CSS HOT 2
- Funnel Filter Icon
- Use in Angular 4 HOT 2
- child_friedly
- Example page makes my computer explode HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-material-icons.