Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #33866
| Newsgroups | comp.lang.javascript |
|---|---|
| Date | 2017-08-23 23:14 -0700 |
| References | <fe80a18f-f772-4375-96d5-8acc749b7b86@googlegroups.com> <onjm41$163j$1@gioia.aioe.org> |
| Message-ID | <86a96b36-3f51-40db-8f20-0ef6dfd015ae@googlegroups.com> (permalink) |
| Subject | Re: CSS transition |
| From | bit-naughty@hotmail.com |
On Wednesday, August 23, 2017 at 4:11:16 PM UTC+5:30, Joao Rodrigues wrote:
> >
> > What am I doing wrong?
> >
>
> Firstly, the css style lacks a 'position: absolute' (or relative or
> fixed depending on your case) in order to set / change the element's
> left property.
>
> #middleoffscreen {
> position: absolute;
> left: 101%;
> }
>
> Then your code will work as desired:
>
Oh I beg your pardon, it's there, I just didn't mention it in my post! :)
> However, you won't get a smooth animation by changing the 'left' (or
> top, right, bottom) property, because it will trigger a reflow process
> in the browser [1].
I'm thoroughly confused - I was watching *this* guys video:
https://www.youtube.com/watch?v=hA-fYOlLXPQ&t=708s
....*he* seems to manage it just fine.....? Have the browsers changed or something..?
>
> So in order to get smooth animations (~ 60 fps), change opacity,
> transform and filter only, besides adding easing functions (ease-in,
> ease-out, etc.). E.g:
>
Why would I change opacity and filter? (I don't even know what "filter" IS....)
> CSS:
>
> #middleoffscreen {
> position: absolute;
> left: 101%;
> transition: transform 0.5s ease-out;
Ummm - I would prefer to do the "transition"-ing in JS...... - could you help me out with the code? :)
Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread
CSS transition bit-naughty@hotmail.com - 2017-08-22 10:59 -0700
Re: CSS transition Martin Honnen <martin.honnen@gmx.de> - 2017-08-22 21:16 +0200
Re: CSS transition Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-08-23 03:14 +0200
Re: CSS transition Martin Honnen <martin.honnen@gmx.de> - 2017-08-23 12:24 +0200
Re: CSS transition JR <jrfaqcom@gmail.com> - 2017-08-23 07:41 -0300
Re: CSS transition Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-08-23 14:51 +0200
Re: CSS transition bit-naughty@hotmail.com - 2017-08-23 23:14 -0700
Re: CSS transition Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2017-08-25 20:17 -0300
csiph-web