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

Groups > comp.lang.javascript > #33864

Re: CSS transition

Show all headers | View raw

On 22-08-2017 14: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?
> 

Firstly, the css style lacks a 'position: absolute' (or relative or 
fixed depending on your case) in order to set / change the element's 
left property.

#middleoffscreen {
   position: absolute;
   left: 101%;
}

Then your code will work as desired:

   var elem = document.getElementById("middleoffscreen");
   elem.style.transition = "left 0.5s linear 0s";
   elem.style.left = "1%";

However, you won't get a smooth animation by changing the 'left' (or 
top, right, bottom) property, because it will trigger a reflow process 
in the browser [1].

So in order to get smooth animations (~ 60 fps), change opacity, 
transform and filter only, besides adding easing functions (ease-in, 
ease-out, etc.). E.g:

CSS:

#middleoffscreen {
   position: absolute;
   left: 101%;
   transition: transform 0.5s ease-out;
}

.transformed {
   transform: translateX(-500px);
}

JS:

var elem = document.getElementById("middleoffscreen");
elem.classList.add('transformed');


Another possibility is using the fresh Web Animations API [2], i.e 
Element.animate(), supported by some modern browsers so far.

function test2() {
   var el = document.getElementById("middleoffscreen");
   var keyframes = [{
     transform: 'translateX(101%)',
     filter: 'blur(40px)',
     opacity: 0
   },
   {
     transform: 'translateX(-700px)',
     filter: 'blur(0)',
     opacity: 1
   }];
   var options = {
     delay: 0,
     endDelay: 0,
     direction: 'alternate',
     duration: 500,
     fill: 'forwards',
     easing: 'ease-out',
   };
   el.animate(keyframes, options);
}


[1] 
<https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/>
[2] <https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API>

-- 
Joao Rodrigues

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