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

Groups > comp.lang.javascript > #33859

Re: CSS transition

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next 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