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

Groups > comp.lang.javascript > #27610

Re: Timing transitions

Show all headers | View raw

On 12/05/2015 08:06, Andrew Poulos wrote:
> On 12/05/2015 4:04 PM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>
>>> I have 2 overlapping elements that are not contained in the same parent
>>> element and I want to apply a transition (say, a wipe on to the right).
>>> How can I get the right-most element to "wait" for the wipe of the left
>>> element to catch up to it before it start its wipe?
>>
>> transition-delay.  There does not appear to be script-related content in
>> this question.
> 
> Sorry, I'm not using CSS3 transitions but I'm intending to write the
> transition myself. The ones I've found online tend to use some sort of
> timed loop that changes the style of the element and I'm concerned about
> the work required to track what position each element is and when the
> transition had "reached" the position of the overlapping element.
> 
> Add to this that the transition should apply smoothly across both
> elements (I don't want a smaller element racing a head of the larger
> one) and I'm at a loss as to how to proceed.
> 

I think CSS3 animation is here to stay. There's a good article by Paul
Irish with some useful guidelines and examples:

<http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/>

A useful toolkit for CSS animation:
<https://github.com/daneden/animate.css>

But if you still need a JavaScript animation, then latch onto the
requestAnimationFrame method:
<https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame>

-- 
Joao Rodrigues

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Timing transitions Andrew Poulos <ap_prog@hotmail.com> - 2015-05-12 12:20 +1000
  Re: Timing transitions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-05-12 08:04 +0200
    Re: Timing transitions Andrew Poulos <ap_prog@hotmail.com> - 2015-05-12 21:06 +1000
      Re: Timing transitions Scott Sauyet <scott.sauyet@gmail.com> - 2015-05-12 08:40 -0700
      Re: Timing transitions Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-05-12 15:35 -0300
      Re: Timing transitions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-05-14 07:49 +0200

csiph-web