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

Groups > comp.lang.javascript > #33857 > unrolled thread

CSS transition

Back to article view | Back to comp.lang.javascript

Contents

  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

#33857 — CSS transition

I have something which is off-screen, ie. it's "left" is 101% in CSS. I'm trying to scroll it in smoothly, but it just *appears*, without a slow scroll. This is my JS code:

var elem = document.getElementById("middleoffscreen");
elem.style.transition = "left 0.5s linear 0s";	   
elem.style.left = "1%";



What am I doing wrong?

[toc] | [next] | [standalone]

#33858

On 22.08.2017 19:59, bit-naughty@hotmail.com wrote:
> I have something which is off-screen, ie. it's "left" is 101% in CSS. I'm trying to scroll it in smoothly, but it just *appears*, without a slow scroll. This is my JS code:
> 
> var elem = document.getElementById("middleoffscreen");
> elem.style.transition = "left 0.5s linear 0s";	
> elem.style.left = "1%";
> 
> 
> 
> What am I doing wrong?


Can you set the CSS for transition statically in a CSS stylesheet and 
only manipulate the left property with your code?

That seems to work https://jsfiddle.net/1pwfpk2L/.

[toc] | [prev] | [next] | [standalone]

#33859

Martin Honnen wrote:

> On 22.08.2017 19:59, bit-naughty@hotmail.com wrote:
>> I have something which is off-screen, ie. it's "left" is 101% in CSS. I'm
>> trying to scroll it in smoothly, but it just *appears*, without a slow
>> scroll. This is my JS code:
>> 
>> var elem = document.getElementById("middleoffscreen");
>> elem.style.transition = "left 0.5s linear 0s";
>> elem.style.left = "1%";
>> 
>> What am I doing wrong?
> 
> Can you set the CSS for transition statically in a CSS stylesheet and
> only manipulate the left property with your code?

That may be a good idea, but should not be necessary.  Dynamically adding 
transitions like that works for me – provided that the *other* CSS 
properties, namely `display` and `position`, and `left` here, have the 
proper values.

However, it is usually better not to set any style properties in script 
code, but to modify the class list of an element, which then triggers the 
corresponding CSS rules.

> That seems to work https://jsfiddle.net/1pwfpk2L/.

Your test case appears to be flawed: You pass different object references, 
but call test1() in both cases.  As test1() does not set the `transition` 
property, and that property was not declared in a ruleset for a selector 
that matches the represented element, it “just appears”.

Compare: <https://jsfiddle.net/1pwfpk2L/1/>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#33863

On 23.08.2017 03:14, Thomas 'PointedEars' Lahn wrote:
> Martin Honnen wrote:

>> That seems to work https://jsfiddle.net/1pwfpk2L/.
> 
> Your test case appears to be flawed: You pass different object references,
> but call test1() in both cases.  As test1() does not set the `transition`
> property, and that property was not declared in a ruleset for a selector
> that matches the represented element, it “just appears”.

Sorry about that, it seems I messed that example up. Thanks for correcting.

[toc] | [prev] | [next] | [standalone]

#33864

On 22-08-2017 14:59, bit-naughty@hotmail.com wrote:
> I have something which is off-screen, ie. it's "left" is 101% in
> CSS. I'm trying to scroll it in smoothly, but it just *appears*,
> without a slow scroll. This is my JS code:
> 
> var elem = document.getElementById("middleoffscreen");
> elem.style.transition = "left 0.5s linear 0s";	
> elem.style.left = "1%";
> 
> 
> 
> 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:

   var elem = document.getElementById("middleoffscreen");
   elem.style.transition = "left 0.5s linear 0s";
   elem.style.left = "1%";

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

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:

#middleoffscreen {
   position: absolute;
   left: 101%;
   transition: transform 0.5s ease-out;
}

.transformed {
   transform: translateX(-500px);
}

JS:

var elem = document.getElementById("middleoffscreen");
elem.classList.add('transformed');


Another possibility is using the fresh Web Animations API [2], i.e 
Element.animate(), supported by some modern browsers so far.

function test2() {
   var el = document.getElementById("middleoffscreen");
   var keyframes = [{
     transform: 'translateX(101%)',
     filter: 'blur(40px)',
     opacity: 0
   },
   {
     transform: 'translateX(-700px)',
     filter: 'blur(0)',
     opacity: 1
   }];
   var options = {
     delay: 0,
     endDelay: 0,
     direction: 'alternate',
     duration: 500,
     fill: 'forwards',
     easing: 'ease-out',
   };
   el.animate(keyframes, options);
}


[1] 
<https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/>
[2] <https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API>

-- 
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#33865

JR wrote:
^^
Your real name belongs there.

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

There is no reason why it should, and in fact the referred blog entry does 
not claim this.  “Reflow” pertains to the rearrangement of elements in the 
document flow.  With `position: absolute`, an element is *taken out* of the 
document flow.  What will happen is “repaint”, but that will happen in any 
case.

> […]
> Another possibility is using the fresh Web Animations API [2], i.e
> Element.animate(), supported by some modern browsers so far.

Interesting.

> […]
> [1]
> <https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/>

This is from 2012-12-20.  The update referred there is from 2016.  We have 
2017-08 now.

Be suspicious of any Web development advice that is older than one year.  
While the advice does not change, layout engines keep being improved.  With 
“rapid release” schedules, the advice from last month can already be out of 
date.  (That is also why it is a bad idea to rely on books in this field.)

> [2] <https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#33866

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

[toc] | [prev] | [next] | [standalone]

#33874

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web