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

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

element transition

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

Contents

  element transition Andrew Poulos <ap_prog@hotmail.com> - 2021-04-08 07:58 +1000
    Re: element transition "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-04-07 15:44 -0700
      Re: element transition Andrew Poulos <ap_prog@hotmail.com> - 2021-04-08 10:05 +1000
        Re: element transition "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-04-07 17:23 -0700
          Re: element transition Andrew Poulos <ap_prog@hotmail.com> - 2021-04-08 16:30 +1000
        Re: element transition Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-04-09 16:48 +0200
          Re: element transition Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-04-09 16:58 +0200

#39854 — element transition

If an image has this CSS

#img {
   display: none;
   opacity: 0;
   transition: opacity 2s;
}

and I later do this

let img = document.getElementById('img');
img.style.display = 'block';
img.style.opacity = 1;

the image doesn't fade-in. To get it to fade-in I changed the last line to

window.setTimeout(() => img.style.opacity = 1, 100);

Is that how it's supposed to "work"?

Andrew Poulos

[toc] | [next] | [standalone]

#39855

On Wednesday, April 7, 2021 at 4:58:46 PM UTC-5, Andrew Poulos wrote:
> If an image has this CSS 
> 
> #img { 
> display: none; 
> opacity: 0; 
> transition: opacity 2s; 
> } 
> 
> and I later do this 
> 
> let img = document.getElementById('img'); 
> img.style.display = 'block'; 
> img.style.opacity = 1; 
> 
> the image doesn't fade-in. To get it to fade-in I changed the last line to 
> 
> window.setTimeout(() => img.style.opacity = 1, 100); 
> 
> Is that how it's supposed to "work"? 

Your problem is the display declaration. Leave that out and it works:

<https://codepen.io/mlhaufe/pen/rNjGZPL>

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

#39856

On 8/04/2021 8:44 am, Michael Haufe (TNO) wrote:
> On Wednesday, April 7, 2021 at 4:58:46 PM UTC-5, Andrew Poulos wrote:
>> If an image has this CSS
>>
>> #img {
>> display: none;
>> opacity: 0;
>> transition: opacity 2s;
>> }
>>
>> and I later do this
>>
>> let img = document.getElementById('img');
>> img.style.display = 'block';
>> img.style.opacity = 1;
>>
>> the image doesn't fade-in. To get it to fade-in I changed the last line to
>>
>> window.setTimeout(() => img.style.opacity = 1, 100);
>>
>> Is that how it's supposed to "work"?
> 
> Your problem is the display declaration. Leave that out and it works:
> 
> <https://codepen.io/mlhaufe/pen/rNjGZPL>

So a setting for the display property affects the transition property?

Andrew Poulos

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

#39857

On Wednesday, April 7, 2021 at 7:05:52 PM UTC-5, Andrew Poulos wrote:
> So a setting for the display property affects the transition property? 

I don't know if it's on purpose or if it's a bug, but yes they seem to not play together nicely.

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

#39858

On 8/04/2021 10:23 am, Michael Haufe (TNO) wrote:
> On Wednesday, April 7, 2021 at 7:05:52 PM UTC-5, Andrew Poulos wrote:
>> So a setting for the display property affects the transition property?
> 
> I don't know if it's on purpose or if it's a bug, but yes they seem to not play together nicely.

Someone online claims that "Browser will not recognize a display: none 
element's attributes." and someone else claims "just by having it 
[opacity] in your CSS it will override the visibility and opacity 
transitions." and this (which seems correct):

"In general, if you carry out a series of 'write' operations - e.g. 
adding an element or setting it's style, the browser will batch these up 
and perform them all at once - the browser does them together before 
reflowing the page, and thus there is no animation. By inserting a write 
operation in between, the browser is able to animate from the current 
state of the element."

Based on the last claim I was surprised to discover that this

let img = document.getElementById('img');
img.style.display = 'block';
document.body.offsetHeight; // a read operation
img.style.opacity = 1;

allows the opacity transition to animate.

Andrew Poulos

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

#39870

Andrew Poulos wrote:

> On 8/04/2021 8:44 am, Michael Haufe (TNO) wrote:
>> On Wednesday, April 7, 2021 at 4:58:46 PM UTC-5, Andrew Poulos wrote:
>>> If an image has this CSS
>>>
>>> #img {
>>> display: none;
>>> opacity: 0;
>>> transition: opacity 2s;
>>> }
>>>
>>> and I later do this
>>>
>>> let img = document.getElementById('img');

  let img = document.images['img'];

>>> img.style.display = 'block';
>>> img.style.opacity = 1;
>>>
>>> the image doesn't fade-in. To get it to fade-in I changed the last line
>>> to
>>>
>>> window.setTimeout(() => img.style.opacity = 1, 100);

This should be at least

  window.setTimeout(() => {img.style.opacity = 1;}, 100);

>>> Is that how it's supposed to "work"?
>> 
>> Your problem is the display declaration. Leave that out and it works:
>> 
>> <https://codepen.io/mlhaufe/pen/rNjGZPL>
> 
> So a setting for the display property affects the transition property?

Yes.  The problem is that “display: none” means that the element should not 
be rendered at all.  If you use “visibility: hidden” instead, and switch 
that to “visibility: visible” without delay when you are fading in, then the 
transition will work.  For fading out you have to use the same delay for the 
“visibility” as for “opacity”, though; otherwise the element will disappear 
immediately and the transition of “opacity” cannot take effect.

One problem that comes with this solution (but I do not know a better one) 
is that the element still uses real estate when “hidden”; if you want to fix 
that, you have to make it rendered like a block-level element and define a 
transition the left/top/right/bottom/(max/min-)width/(max/min-)height 
properties as well.

This is a matter of CSS, not of scripting.

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

#39873

Thomas 'PointedEars' Lahn wrote:

> Andrew Poulos wrote:
>> So a setting for the display property affects the transition property?
> 
> Yes.  The problem is that “display: none” means that the element should
> not be rendered at all.  If you use “visibility: hidden” instead, and
> switch that to “visibility: visible” without delay when you are fading in,
> then the transition will work.  For fading out you have to use the same
> delay for the “visibility” as for “opacity”, though; otherwise the element
> will disappear immediately and the transition of “opacity” cannot take
> effect.

N.B.: Declaring the “visibility” property value (CSS ≤ 2.x) as well was/is a 
workaround for layout engines that did/do not support the “opacity” property 
(CSS 3).  For modern layout engines which support CSS Level 3 and above, 
declaring “visibility” is not strictly necessary if you declare “opacity” 
like that, although there might still be circumstances where it is useful.

-- 
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] | [standalone]

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

csiph-web