Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #33874

Re: CSS transition

Show all headers | View raw

bit-naughty wrote:
> On Wednesday, August 23, 2017 at 4:11:16 PM UTC+5:30, Joao Rodrigues wrote:
>>
>> 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! :)

Then it must have been something else in your code and /or stylesheet 
that was either impeding the animation to happen or to be perceived.


>> 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..?
> 

Thanks for the link! - I enjoy that style of teaching. There's nothing 
wrong with the technique taught on that video. I was only commenting 
that changing the 'left' property via JavaScript might cause “janky 
animations” [1][2], obviously depending on the complexity of the 
document's DOM tree, on the device in use (desktop or mobile). Changing 
top, right, bottom and left properties (call it TRouBLe for short) may 
cause animation lags.

I prefer using CSS animations and transitions to take advantage of 
hardware acceleration, but I'm aware of some cases in which JavaScript 
animations suit fine, particularly Web Animations API (WAAPI) [3].

>>
>> 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:
>>

CSS experts, such as Rachel Nabors, Lea Verou, Sarah Drasner, and JS 
engine experts as Paul Lewis and Paul Irish, people who currently work 
at Microsoft, Google, Mozilla, some of them are invited experts at the 
W3C, recommend animating opacity, transform and filter properties, 
because of smaller paint times, and 2D / 3D CSS functions as 
translate3d() that run on the computer's GPU.

Also it is fine to animate some other CSS properties, such as color or 
background-color. Use Google (or Firefox) Developer Tools [4] to inspect 
animations and tweak transition timing functions, duration, and delays. 
And use your judgement to choose what you see fit in your document. But 
test in mobile devices too because bad things can happen, you know :-)

> 
> Why would I change opacity and filter? (I don't even know what "filter" IS....)

Opacity allows you to adjust an element's transparency, and thus it is 
used in fade-in and fade-out effects. Remember 'display' is not an 
"animatable" property [5].

Filter lets you apply graphical effects like blurring, sharpening, or 
color shifting to an element. Filters are commonly used to adjust the 
rendering of images, backgrounds, and borders. [6].


> 
>> 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? :)
> 

OK. Here's an example:

HTML:

<input type="button" value="test" onclick="test()">
<div id="middleoffscreen">
   Just an exercise.
</div>

CSS:

#middleoffscreen {
   position: absolute;
   left: 101%;
}

JS:

function test() {
   var el = document.getElementById("middleoffscreen");
   el.style.transition = 'transform 0.5s ease-out';
   el.style.transform = 'translate3d(-600px, 0, 0)';
}



[1] 
<https://www.chromium.org/developers/how-tos/trace-event-profiling-tool/anatomy-of-jank>

[2] <http://jankfree.org/>

[3] <http://danielcwilson.com/blog/2016/08/why-waapi/>

[4] 
<https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations?hl=en>

[5] 
<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties>

[6] <https://developer.mozilla.org/pt-BR/docs/Web/CSS/filter>

-- 
Joao Rodrigues

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

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