Open joetex opened 8 years ago
I am having weird behavior too, but even when i used the code you provided, its still behaving weirdly... i am wondering if i supposed to assign the scrollEL to a div that is scrollable?? Because i have anchor tag that is supposed to be clickable, but now the touchstart/touchend event is being detected, but the anchor tag "click" isnt getting triggered.
Cool, it's quite better performance with this transform version than only with positioning, but yes, the arroy spin still extrange. My fix is a CSS fix, just add a transition to the arrow. This can be done in the selector .mui-arrow-main
that is in line 44 of material-refresh.css
by adding:
-webkit-transition: transform 0.2s;
-moz-transition: transform 0.2s;
-o-transition: transform 0.2s;
transition: transform 0.2s;
So, the full selector ends like this:
.mui-half-circle,
.mui-arrow-main {
position: absolute;
top: 0;
width: 25px;
height: 25px;
box-sizing: border-box;
border-width: 3px;
border-style: solid;
border-color: #000 #000 transparent;
border-radius: 999px;
-webkit-transition: transform 0.2s;
-moz-transition: transform 0.2s;
-o-transition: transform 0.2s;
transition: transform 0.2s;
}
Hope to help ;)
P.D. Yes, it also affects to .mui-half-circle
, but I haven't detected any extrange behaviour. If you are so paranoid about it, you can just add a new style rule between line 55 and 56, exactly this one:
.mui-arrow-main {
-webkit-transition: transform 0.2s;
-moz-transition: transform 0.2s;
-o-transition: transform 0.2s;
transition: transform 0.2s;
}
Happy coding!
The way the pull down worked was a bit too particular. I relaxed the requirements a bit and I also changed the movement animation to use transform: translate instead of .animate. It should feel more fluid to the user.
I modified it quickly for my app, don't have too much time to clean it up, you may find some junk variables and console.logs in there. I mainly edited, touchStart, touchMove, touchEnd, and moveCircle.