[FIXED][3.0] Slidein/out effect scales element

[cnelissen]

There is some strange behavior going on with the slideIn and slideOut Fx in 3.0. I created a simple example:

JS


Ext.onReady(function() {
// Setup the sliding divs
var nodes = Ext.DomQuery.select('#slide-container > div');
for (var i = 0; i < nodes.length; i++) {
var node = Ext.fly(nodes[i]);
node.setStyle({'background-color': '#ececec', 'position': 'absolute', 'width': '500px', 'visibility': 'hidden', 'z-index': '100'});
}

var firstNode = Ext.get(Ext.DomQuery.selectNode('#slide-container > div:first-child'));
if (firstNode) {
firstNode.setStyle({visibility: 'visible'});
firstNode.addClass('active');
}
});

function slide(node) {
var outNode = Ext.get(Ext.DomQuery.selectNode('#slide-container > div.active'));
var inNode = Ext.get(node);

if (outNode && inNode && outNode != inNode) {
// Slide out the active node
outNode.removeClass('active');
outNode.setStyle({'z-index': '100'});
outNode.slideOut('l');

// Slide in the target node
inNode.addClass('active');
inNode.setStyle({'z-index': '1000'});
inNode.slideIn('r');
}
}


HTML


<a href="javascript: slide('slide-1');">Slide 1</a>
<a href="javascript: slide('slide-2');">Slide 2</a>
<a href="javascript: slide('slide-3');">Slide 3</a>
<a href="javascript: slide('slide-4');">Slide 4</a>

<div id="slide-container">
<div id="slide-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis orci ligula. Phasellus mattis sem libero, at porttitor arcu. Donec pellentesque laoreet euismod. Sed sollicitudin ultricies metus, quis vehicula risus scelerisque non. Quisque consequat leo sed tortor vehicula imperdiet semper dolor interdum. Ut vitae sagittis nulla. Proin eu ipsum pretium ante ultricies condimentum. Suspendisse pharetra sollicitudin accumsan. Quisque ut nunc nec lacus rhoncus dictum non quis nulla. Aliquam mattis massa in metus sodales porta. Suspendisse tortor quam, blandit eget malesuada quis, consectetur porta purus. Duis pharetra, turpis vitae ullamcorper molestie, nisi nisi luctus nibh, non imperdiet leo libero nec justo. </p>
</div>
<div id="slide-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis orci ligula. Phasellus mattis sem libero, at porttitor arcu. Donec pellentesque laoreet euismod. Sed sollicitudin ultricies metus, quis vehicula risus scelerisque non. Quisque consequat leo sed tortor vehicula imperdiet semper dolor interdum. Ut vitae sagittis nulla. Proin eu ipsum pretium ante ultricies condimentum. Suspendisse pharetra sollicitudin accumsan. Quisque ut nunc nec lacus rhoncus dictum non quis nulla. Aliquam mattis massa in metus sodales porta. Suspendisse tortor quam, blandit eget malesuada quis, consectetur porta purus. Duis pharetra, turpis vitae ullamcorper molestie, nisi nisi luctus nibh, non imperdiet leo libero nec justo. </p>
</div>
<div id="slide-3">
<p>Integer rhoncus felis egestas dui dapibus adipiscing vehicula orci molestie. Maecenas nec orci sem. Nam egestas, est vitae vehicula tempus, odio augue gravida ipsum, non eleifend erat neque vitae dolor. Nunc scelerisque facilisis magna, nec molestie ipsum commodo vel. Mauris vitae lorem lacus, sed feugiat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis malesuada nunc, non dignissim velit imperdiet in. Etiam at sem commodo felis sagittis iaculis ut ac justo. Maecenas mattis porta diam vitae tempus. Sed nec tincidunt velit. Vivamus risus nunc, commodo in vehicula at, aliquet in mauris. Proin laoreet luctus dignissim. Ut erat massa, pharetra eu condimentum in, eleifend quis ligula. </p>
</div>
<div id="slide-4">
<p>Nunc metus odio, adipiscing quis gravida et, tincidunt non tortor. Morbi nec urna sed risus mollis pretium. Nulla quis lacus non mi hendrerit posuere quis vel lacus. Duis gravida, sapien vitae blandit molestie, sapien dolor imperdiet odio, et congue sapien tellus ut purus. Praesent ut pellentesque arcu. In id tellus mauris. Proin feugiat scelerisque turpis, quis mollis lectus cursus sed. Sed blandit, mi quis auctor commodo, diam odio feugiat ante, vel viverra ligula mi a eros. Fusce volutpat consequat sagittis. Nam eget urna sed turpis sagittis interdum eget ut ligula. Nulla dapibus, nisi id condimentum eleifend, elit ante consectetur felis, et eleifend tortor ante eget nisl. Donec in magna velit. Mauris sed ipsum eu est tempor vulputate vitae non nisl. Praesent ac mi felis. Vivamus eleifend, nisi quis suscipit volutpat, sapien neque tristique leo, nec tristique mi elit nec leo. Pellentesque arcu turpis, hendrerit a tristique aliquet, vestibulum vel felis. Praesent ac auctor ipsum. Donec ultricies est id velit sollicitudin vel ullamcorper libero accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam neque turpis, auctor sed feugiat congue, bibendum in erat. </p>
</div>
</div>


In the 2.2 branch, this creates a very simple sliding content system which is pretty smooth. When trying the same code in 3.0, it seems the elements get scaled at the same time as the slide effect, creating a strange choppy action...

Is this the intended behavior in 3.0?

[cnelissen]

Ok, I got some time this morning to dig into this a bit, and I've fixed half the problem so far... It seems the wrap does not receive a width with anchor left or right. Heres a snip:



args = me.switchStatements(anchor.toLowerCase(), argCalc, {
t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],
// l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],
l : [wrap, st, b.width, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],
// r : [wrap, st, 0, b.height, SETX, b.right, LEFT, TOP, bw, NULL, pt],
r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, bw, NULL, pt],
b : [wrap, st, b.width, 0, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],
tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, NULL, pt],
bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],
br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],
tr : [0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]
});


Giving the wrap a width gets rid of the scaling on the slideIn effect.

Maybe someone could shed some light on that... Is there a reason the wrap doesn't get a width?

Still working on the slideOut issues...

[cnelissen]

The trouble is really only when anchor is r, b, br, bl, or tr. Using tl is also messed up in a different way, which I did manage to correct below...

Setting the width or height of the wrap gets rid of the scaling effect using r or b. But after that change, the slide animation runs too fast. I.e. if you do something like:

el.slideIn('r', {duration: 8});

The slide animation actually completes in about 2 seconds, then it just waits for the rest of the duration...

Here are the workarounds I'm using so far:



args = me.switchStatements(anchor.toLowerCase(), argCalc, {
t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],
l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],
// r : [wrap, st, 0, b.height, SETX, b.right, LEFT, TOP, bw, NULL, pt], <- Missing b.width
r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],
// b : [wrap, st, b.width, 0, SETY, b.bottom, LEFT, TOP, NULL, bh, pt], <- Missing b.height
b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, NULL, pt],
// tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, NULL, pt], <- Missing height on second to last arg
tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],
bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],
br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],
// tr : [0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt] <- This line is missing the 'wrap' and style args....
tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]
});


Anyone have any input?

[cnelissen]

This is affecting slideOut as well. These anchors will produce some strange scaling:

el.slideOut('r');
el.slideOut('b');
el.slideOut('bl');
el.slideOut('br');
el.slideOut('tr');

These anchors work as expected:

el.slideOut('l');
el.slideOut('tl');

[aconran]

Thanks for the debugging. We'll look into this.

[Ant1105]

I have seen a similar problem as well with an Ext.Window. This code worked in 2.2, but in 3.0 throws a firebug error. Seems to do it only with an anchor of 'tr'. All the others work fine. ('tl', 't', 'b', etc)



Code

afterRender: function() {
this.getEl().slideIn('tr');
}

Firebug Error

wrap.setWidth is not a function

[cnelissen]

I have seen a similar problem as well with an Ext.Window. This code worked in 2.2, but in 3.0 throws a firebug error. Seems to do it only with an anchor of 'tr'. All the others work fine. ('tl', 't', 'b', etc)


Yup, I mentioned that... This is because the tr anchor is missing a few args. You can change the lines manually if you need to use tr as an anchor point.



tr : [0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]


Change to:



tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]

[Ant1105]

Thx Clint, that fixed it!

[evant]

I added a series of fixes to the FX and base anim classes, too much to post here, however you can grab them in the next release or SVN.