[lnkForumImage]
TotalShareware - Download Free Software
Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

Timing transitions

Andrew Poulos

5/12/2015 2:21:00 AM

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
5 Answers

Thomas 'PointedEars' Lahn

5/12/2015 6:04:00 AM

0

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Andrew Poulos

5/12/2015 11:07:00 AM

0

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

Scott Sauyet

5/12/2015 3:40:00 PM

0

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

JR

5/12/2015 6:35:00 PM

0

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

A useful toolkit for CSS animation:
<https://github.com/daneden/anima...

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

--
Joao Rodrigues

Thomas 'PointedEars' Lahn

5/14/2015 5:50:00 AM

0

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.