dgileadi / zepto-page-transitions

HTML5 Page Transitions similar to JQuery Mobile page transitions, but standalone (13k) and using Zepto.js
167 stars 46 forks source link

Up/Down Transition Slide Issue #14

Closed gk-bryn closed 11 years ago

gk-bryn commented 11 years ago

Hi there, Lovin' this code - just what I was looking for, so thanks for your good work. I'm having a couple of issues with the slideup and slidedown features - the next page slides in correctly but the current page does not slide out, the way it does when sliding left or right (which looks sweet) Wondered if theres was quick fix for this.?

Also is there a way to add an option to choose between to sliding left or right on each page transition?

Thanks for any help you can give on this one. B.

dgileadi commented 11 years ago

The transitions all come from the .css file. I honestly haven't tried them all; I got them from another site that was doing something similar. If you're able to fix the issue and submit a pull request with the fix it would be awesome; otherwise I'll see if I can take a look. I've been busy recently so it may be a while.

On Mar 14, 2013, at 8:40 AM, gk-bryn notifications@github.com wrote:

Hi there, Lovin' this code - just what I was looking for, so thanks for your good work. I'm having a couple of issues with the slideup and slidedown features - the next page slides in correctly but the current page does not slide out, the way it does when sliding left or right (which looks sweet) Wondered if theres was quick fix for this.?

Also is there a way to add an option to choose between to sliding left or right on each page transition?

Thanks for any help you can give on this one. B.

— Reply to this email directly or view it on GitHub.

dgileadi commented 11 years ago

It turns out that slideup and slidedown are meant to work that way, emulating a modal dialog on iOS for example. You could copy the slide styles in transition.css/transition.min.css to create your own up/down transition if you like.

As the docs mention you can change the direction of any effect by adding a direction="reverse" or data-direction="reverse" attribute to the link.