cnelissen
12 May 2009, 8:08 AM
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?
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?