Re: Timing transitions

Path	csiph.com!v102.xanadu-bbs.net!xanadu-bbs.net!feeder.erje.net!us.feeder.erje.net!news2.arglkargh.de!news.mixmin.net!aioe.org!.POSTED!not-for-mail
From	Joao Rodrigues <groups_jr-1@yahoo.com.br>
Newsgroups	comp.lang.javascript
Subject	Re: Timing transitions
Date	Tue, 12 May 2015 15:35:17 -0300
Organization	Aioe.org NNTP Server
Lines	37
Message-ID	<mith53$n2h$1@speranza.aioe.org> (permalink)
References	<SPWdnS-fddzk_szInZ2dnUVZ8qednZ2d@westnet.com.au> <6094810.RaRjTPOJpR@PointedEars.de> <XdudnQnfZp44Q8zInZ2dnUVZ8oudnZ2d@westnet.com.au>
NNTP-Posting-Host	YvaHqxzoYrEDLOGsC1Im/w.user.speranza.aioe.org
Mime-Version	1.0
Content-Type	text/plain; charset=windows-1252
Content-Transfer-Encoding	7bit
X-Complaints-To	abuse@aioe.org
User-Agent	Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.0) Gecko/20100101 Thunderbird/31.6.0
X-Notice	Filtered by postfilter v. 0.8.2
Xref	csiph.com comp.lang.javascript:27610

Show key headers only | 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

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