How To Add 'Back' Parameter on Slide Transition?

How To Add 'Back' Parameter on Slide Transition?

I'm using Intel's AppFramework and I have this code :
<div title="welcome" id="login" class="panel" selected="true">
<!-- some code here -->
<a href="#register" class="soc-btn gray-btn left"
data-transition="slide">Sign Up</a>
<!-- some code here -->
</div
<div title="register" id="register" class="panel">
<!-- some code here -->
<a href="#login" class="soc-btn gray-btn left"
data-transition="slide">Cancel</a>
<!-- some code here -->
</div>
the transition from #login to #register works like a charm, page loaded
from right-to-left. but how to apply 'slide-back' transition make 'cancel'
button on #register to load #login from left-to-right?
I saw on ui/transition/all.js documentation :
Initiate a sliding transition. This is a sample to show how transitions
are implemented.
These are registered in $ui.availableTransitions and take in three
parameters.
@param {Object} previous panel
@param {Object} current panel
@param {Boolean} go back
@title $ui.slideTransition(previousPanel,currentPanel,goBack);
but how to add 'goBack' parameter into my code? thank you
here's the complete code of the slide transition :
(function ($ui) {
/**
* Initiate a sliding transition. This is a sample to show how
transitions are implemented. These are registered in
$ui.availableTransitions and take in three parameters.
* @param {Object} previous panel
* @param {Object} current panel
* @param {Boolean} go back
* @title $ui.slideTransition(previousPanel,currentPanel,goBack);
*/
function slideTransition(oldDiv, currDiv, back) {
oldDiv.style.display = "block";
currDiv.style.display = "block";
var that = this;
if (back) {
that.css3animate(oldDiv, {
x: "0%",
y: "0%",
complete: function () {
that.css3animate(oldDiv, {
x: "100%",
time: $ui.transitionTime,
complete: function () {
that.finishTransition(oldDiv, currDiv);
}
}).link(currDiv, {
x: "0%",
time: $ui.transitionTime
});
}
}).link(currDiv, {
x: "-100%",
y: "0%"
});
} else {
that.css3animate(oldDiv, {
x: "0%",
y: "0%",
complete: function () {
that.css3animate(oldDiv, {
x: "-100%",
time: $ui.transitionTime,
complete: function () {
that.finishTransition(oldDiv, currDiv);
}
}).link(currDiv, {
x: "0%",
time: $ui.transitionTime
});
}
}).link(currDiv, {
x: "100%",
y: "0%"
});
}
}
$ui.availableTransitions.slide = slideTransition;
$ui.availableTransitions['default'] = slideTransition;
})(af.ui);