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

Groups > comp.lang.javascript > #39870

Re: element transition

Show all headers | View raw

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.

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

Thread

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

csiph-web