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

Groups > comp.lang.javascript > #27619

Re: Timing transitions

Show key headers only | View raw

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.

Why?  Do you think that you are more proficient and experienced at writing 
transition/animation code than the authors of Web layout engines?  Do you 
find something missing from the built-in ones?

> 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.

I do not know what you have found, so I cannot even assess whether you 
understood it correctly.  Cast out fear.

To move an element from left to right of a parent element in a transition, 
you can set the child element’s “left” property to “0%”, and for a ruleset 
with an additional class selector to “100%”.  You must also use a transition 
for the “margin-left” property then so that the right-hand border of the 
element is at the right hand border of the parent (the margin needs to have 
negative length).  Then you use client-side scripting to set the “className” 
property of the elements, starting the transition:

  document.querySelector(".parent .animatable").className += " final";
  document.querySelector(".parent .animatable.right").className += " final";

For the second element (“.parent .animatable.right”) the transition will not 
start immediately because of transition-delay.  You know how long it takes 
for the first transition to finish, and that is the proper value for 
the second’s transition-delay.

> 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 am at a loss to follow you.  For smooth transitions you do not *only* use 
a single-threaded programming language, even if it is possible, if there are 
better alternatives.  And there are.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous 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