Add Progress Indicators #632
Conversation
|
|
||
| var sheet = createSheet(); | ||
|
|
||
| var keyframeTags = [ "@keyframes ", "@-webkit-keyframes "]; |
There was a problem hiding this comment.
Did you try using the auto-prefixer? I was wrapping up my version of the progress indicators but it looks like you beat me to it.
There was a problem hiding this comment.
I tried using the auto-prefixer but part of creating the rules believe he will not put the prefix in keyframes, any ideas?
There was a problem hiding this comment.
@castrolol I used to use keyframes to animate focus ripples. As you found out, there's not an inline equivalent to keyframes (that I know of). I ended up just implementing the animation in js. You can check out the current implementation of focus ripple for inspiration. https://github.com/callemall/material-ui/blob/master/src/ripples/focus-ripple.jsx#L61
There was a problem hiding this comment.
@castrolol The performance loss is most likely due applying transition to width and not because of setTimeout. I would recommend using transform scale3D instead. See:
http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/
There was a problem hiding this comment.
@hai-cea So you recommend changing to setTimeout rather than using animation and use scale3D right will change later when I leave the office.
But I found it's nice the way to define the animation
There was a problem hiding this comment.
My implementation relied on transitionend event. Worked pretty well for the linear progress indicator but fell apart when applied to circular. The circular progress was very jumpy; the animations smoothed it out.
I much prefer using animations when I need to repeat something.You can accomplish this using the transitionend event but 'resetting' the element can be tricky. For the circle, you could try rotate 360 and on transitionend set the rotation to 0 outside of the render method and then get the height (I think height will 'redraw' the element).
There was a problem hiding this comment.
@jkruder thank you.
I'll do it, I believe it is possible with JS, but I'm still worried the complexity of code reading and performance. Today I will send the adjustments. I wanted to work in the AutoComplete but I saw the need for progress bar to stay nice.
|
@castrolol General comment: I mean this in the most constructive way; my goal is not to offend you. Before starting work on a feature or resolution of an issue, be sure no one else is already working that feature/issue. This is the second time someone else has worked the same effort; now my development time is essentially wasted. This can be quite frustrating/irritating to some individuals and may turn them away from the open source community (or from supporting a repo) and I ask that you confirm no one has explicitly indicated s/he is working a feature/issue. That being said, your overall approach is similar to the one that I took. |
|
@jkruder I apologize for doing it that way, I'm new on github and still do not have this expertise. I'll pay attention to it, I saw that you were working on it but as I was about 12 days believed had redirected their efforts. I will try to be more communicative. Thank you: D |
|
@castrolol Thanks! |
|
@castrolol It looks like you're still requiring ./styles/animations in your components. |
|
@hai-cea sorry for the mistake, fixed! |
|
@castrolol Can you sync with master please? |
Conflicts: src/index.js
|
@hai-cea it's done! |
|
@castrolol Just a friendly tip, but when syncing with upstream you should be rebasing instead of merging. That way you avoid ugly merge commits like |
|
@troutowicz thanks man! I'm new to github, I work with TFS and confuse me by the similarity of the terms. I'll update me about it |
|
Thanks @castrolol 👍 |
zannager
added
the
component: progress
Added Progress Indicators:
All with determinate and indeterminate mode.
Issue #592