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 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> References: 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="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+&. 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: -- PointedEars FAQ: | | Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.