Path: csiph.com!3.eu.feeder.erje.net!feeder.erje.net!news.mb-net.net!open-news-network.org!.POSTED.178.197.192.93!not-for-mail From: Thomas 'PointedEars' Lahn Newsgroups: comp.lang.javascript Subject: Re: element transition Date: Fri, 09 Apr 2021 16:48:26 +0200 Organization: PointedEars Software (PES) Lines: 57 Message-ID: <2065756.irdbgypaU6@PointedEars.de> References: <15304a23-f1c6-49a3-a61f-0b6e422ad315n@googlegroups.com> Reply-To: Thomas 'PointedEars' Lahn Mime-Version: 1.0 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: 8Bit Injection-Info: gwaiyur.mb-net.net; posting-host="178.197.192.93"; logging-data="16056"; mail-complaints-to="abuse@open-news-network.org" User-Agent: KNode/4.14.10 Cancel-Lock: sha1:kN6dvZXmDO3OnJywclZ2gZqQUa0= X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&. 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: >> >> > > 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: | | Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.