Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #33859
| Path | csiph.com!aioe.org!news.mb-net.net!open-news-network.org!.POSTED.75.236.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch!not-for-mail |
|---|---|
| From | Thomas 'PointedEars' Lahn <PointedEars@web.de> |
| Newsgroups | comp.lang.javascript |
| Subject | Re: CSS transition |
| Date | Wed, 23 Aug 2017 03:14:03 +0200 |
| Organization | PointedEars Software (PES) |
| Lines | 38 |
| Message-ID | <1574902.VLH7GnMWUR@PointedEars.de> (permalink) |
| References | <fe80a18f-f772-4375-96d5-8acc749b7b86@googlegroups.com> <onhvuo$r4b$1@news.albasani.net> |
| Reply-To | Thomas 'PointedEars' Lahn <cljs@PointedEars.de> |
| Mime-Version | 1.0 |
| Content-Type | text/plain; charset="UTF-8" |
| Content-Transfer-Encoding | 8Bit |
| Injection-Info | gwaiyur.mb-net.net; posting-host="75.236.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch:178.197.236.75"; logging-data="9229"; mail-complaints-to="abuse@open-news-network.org" |
| User-Agent | KNode/4.14.2 |
| X-User-ID | U2FsdGVkX1+AwkEIuJKtxAgMPVk3iwWz3qKUuqnzba5vUH/nXIX/wA== |
| Face | iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg== |
| Cancel-Lock | sha1:4WAJI4l5iL/XtpkH3nxe6n3v60A= |
| X-Face | %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v |
| Xref | csiph.com comp.lang.javascript:33859 |
Show key headers only | 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
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