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

Groups > comp.lang.javascript > #27606 > unrolled thread

Timing transitions

Back to article view | Back to comp.lang.javascript

Contents

  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

#27606 — Timing transitions

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?

What I'm after is for the wipe of the 2 elements to happen in one 
apparent continuous movement instead of the obvious 2 separate wipes I'm 
getting now.

Andrew Poulos

[toc] | [next] | [standalone]

#27607

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.

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

[toc] | [prev] | [next] | [standalone]

#27608

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.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#27609

Andrew Poulos wrote:
> [... elided ...]
>> 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?
> [...]
> 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 would suggest finding the nearest common ancestor element your two
elements share, and calculating their offsets from the sides of that
element.  Then you can iterate from the leftmost offset to the rightmost 
offset, calculating the actual position for each element by simple 
subtraction.

  -- Scott

[toc] | [prev] | [next] | [standalone]

#27610

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

[toc] | [prev] | [next] | [standalone]

#27619

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.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web