Forums

Im going to attempt to create an additional transition method for Y.App. Delving into the code it looks like I will have to extend 'app-transitions' and 'app-transitions-native' classes. I don't really know what Im doing but im going to have a go to figure it out.

Should anybody who does have a clue (eric!) have a moment to sketch out the steps of how I should go about this I would be very grateful.

Kind regards

Richard.

Ok, so I got somewhere with this, although the results / headaches and limitations make me question the whole exercise!!

For anyone interested, I had 3 views that I wanted to scroll up and down, so that views effectively stacked 1 - 2 - 3 and scrolled in either from the top or the bottom sort of like a vertical carousel. (view 1 always scrolls in from top, view 3 always scrolls in from the bottom and view 2 will scroll in from the top or the bottom depending on the current active view being 1 or 2.

Here is the code based on Eric's recommendations that made this happen:

Y.mix(Y.Transition.fx, {
'app:slideUp': {
opacity : 1,
duration : 1,
transform: 'translateY(-100%)',

on: {
start : function () {
this.setStyles({
display:'block',
opacity : 1
});
},
end: function () {
this.setStyle('transform', 'translateY(0%)');
}
}
},

'app:slideDownIn': {
duration : 1,
transform: 'translateY(-105%)',

on: {
start : function () {
this.setStyles({
opacity : 1,
display:'block',
'transform' : 'translateY(-220%)'
});
},
end: function () {
this.setStyle('transform', 'translateY(0%)');
}
}
},

'app:slideDownOut': {
duration : 1,
transform: 'translateY(110%)',

on: {
start : function () {
this.setStyles({
opacity : 1,
display:'block'
});
},
end: function () {
}
}
}
});

Y.mix(Y.App.Transitions.FX ,{
slideUp: {
viewIn : 'app:slideUp',
viewOut: 'app:slideUp'
},
slideDown: {
viewIn : 'app:slideDownIn',
viewOut: 'app:slideDownOut'
}
});

in the app you have to pass the newly defined transition as an option in the third parameter like so:

this.showView("viewX",{viewConfig: Y},{transition:'slideDown'});

and if you want to test for the active view to know whether the 'middle' view should scroll from top or bottom then:

if(this.get("activeView") && this.get("activeView").name=='testView') ....


I had to change the style 'display' to 'block' in the transition as it normal uses 'in-line' I guess to support the horizontal transitions. Also, the slideDown was more tricky because the app always appends the new view in the app container, which doesn't really fit the carousel model I was looking to achieve, as a result this will also only really work when all the views have the same height.

Anyway, its there for anyone else who is interested.

Thanks Eric for your help.

By the way if you happen to read this Eric, after the transition finishes, their is a very noticable 'flashing' of the view, i guess somewhat related to the 'other' view being deleted and the end of the transition, something to do with the on:end function I don't know? Is this something you are aware of or know what it could be? Im not sure if it happens with your slideleft slideright transitions as they are pretty quick and so jerky anyway.

Yes the performance of the transitions is something that I'm aware of and would always like to improve. Moving to hardware accelerated CSS3 transition will help but it comes with its own set of quirks :-/